From 22e497398f2e4ae80e951df117503f2e2f32fbbe Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Wed, 7 Aug 2024 00:08:12 +0530
Subject: [PATCH 01/33] Initial commit

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 68 +++++++++++++++++
 .../app/main/ui/workspace/tokens/sets.scss    | 74 +++++++++++++++++++
 .../app/main/ui/workspace/tokens/sidebar.cljs |  2 +
 3 files changed, 144 insertions(+)
 create mode 100644 frontend/src/app/main/ui/workspace/tokens/sets.cljs
 create mode 100644 frontend/src/app/main/ui/workspace/tokens/sets.scss

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
new file mode 100644
index 000000000..8c56aa21b
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -0,0 +1,68 @@
+(ns app.main.ui.workspace.tokens.sets
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.icons :as i]
+   [rumext.v2 :as mf]))
+
+;; Sample data
+(def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
+                   #uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
+
+(def sets-root-order [#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
+                      #uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8"
+                      #uuid "0381446e-1f1d-423f-912c-ab577d61b79b"])
+
+(def sets {#uuid "9c5108aa-bdb4-409c-a3c8-c3dfce2f8bf8" {:type :group
+                                                         :name "Group A"
+                                                         :children [#uuid "d1754e56-3510-493f-8287-5ef3417d4141"
+                                                                    #uuid "d608877b-842a-473b-83ca-b5f8305caf83"]}
+           #uuid "d608877b-842a-473b-83ca-b5f8305caf83" {:type :set
+                                                         :name "Set A / 1"}
+           #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
+                                                         :name "Group A / B"
+                                                         :children [#uuid "d608877b-842a-473b-83ca-b5f8305caf83"
+                                                                    #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
+           #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
+                                                         :name "Set A / B / 1"}
+           #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb" {:type :set
+                                                         :name "Set A / B / 2"}
+           #uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3" {:type :set
+                                                         :name "Set Root 1"}
+           #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
+                                                         :name "Set Root 2"}})
+
+(defn render-set [set-id]
+  (println "Rendering set with ID:" set-id)
+  (let [set (get sets set-id)
+        {:keys [type name children]} set
+        icon (if (= type :group) i/document i/document)] ;; Correct icon for groups
+    [:div {:class (stl/css-case :set-item true :group (= type :group))}
+     [:div {:class (stl/css :set-icon)} icon]
+     [:span {:class (stl/css :set-name)} name]
+     (when children
+       [:div {:class (stl/css :set-children)}
+        (for [child-id children]
+          (do
+            (println "Rendering child ID:" child-id)
+            ^{:key (str child-id)} [render-set child-id]))])]))
+
+(mf/defc sets-list
+  {::mf/wrap-props false}
+  []
+  (println "Rendering Sets List with root order:" sets-root-order)
+  [:div.assets-bar
+   (for [set-id sets-root-order]
+     ^{:key (str set-id)}
+     [:& render-set {:key (str set-id) :set-id set-id}])])
+
+(mf/defc sets-sidebar
+  {::mf/wrap-props false}
+  []
+  (println "Rendering sets sidebar")
+  [:div {:class (stl/css :sets-sidebar)}
+   [:div {:class (stl/css :sidebar-header)}
+    "SETS"
+    [:button {:class (stl/css :add-button)
+              :on-click #(println "Add Set")} 
+     "Add"]]
+   [:& sets-list]])
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
new file mode 100644
index 000000000..7a24a23d8
--- /dev/null
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -0,0 +1,74 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.sets-sidebar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: var(--height, $s-200);
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: $s-2;
+  color: var(--title-foreground-color-hover);
+}
+
+.add-button {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  padding: 0;
+  margin-right: $s-12;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.sets-list {
+  width: 100%;
+  max-height: $s-152;
+  margin-bottom: $s-12;
+}
+
+.set-item {
+  @include bodySmallTypography;
+  min-height: $s-32;
+  width: 100%;
+  cursor: pointer;
+  &.group {
+    padding-left: $s-12;
+  }
+  .set-name {
+    @include textEllipsis;
+    flex-grow: 1;
+    padding-left: $s-2;
+  }
+  .set-icon {
+    @include flexCenter;
+    height: $s-32;
+    width: $s-24;
+    padding: 0 $s-4 0 $s-8;
+    svg {
+      @extend .button-icon-small;
+      height: $s-12;
+      width: $s-12;
+      color: transparent;
+      fill: none;
+      stroke: var(--icon-foreground);
+    }
+  }
+  .set-children {
+    padding-left: $s-12;
+  }
+}
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 7cab3ea9a..e976a9510 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -20,6 +20,7 @@
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-types :as wtty]
+   [app.main.ui.workspace.tokens.sets :refer [sets-sidebar]]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -171,6 +172,7 @@
    ::mf/wrap-props false}
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
+   [:& sets-sidebar]  ;; Add sets sidebar here
    [:& tokens-explorer]
    [:button {:class (stl/css :download-json-button)
              :on-click wtc/download-tokens-as-json}

From 02a19a6b330e6e5df71be5338d16468f3b868547 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Wed, 7 Aug 2024 00:57:13 +0530
Subject: [PATCH 02/33] Next commit

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 8c56aa21b..023c1eae9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -31,20 +31,23 @@
            #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
                                                          :name "Set Root 2"}})
 
-(defn render-set [set-id]
+
+(mf/defc render-set
+  [{:keys [set-id]}]
   (println "Rendering set with ID:" set-id)
-  (let [set (get sets set-id)
-        {:keys [type name children]} set
-        icon (if (= type :group) i/document i/document)] ;; Correct icon for groups
-    [:div {:class (stl/css-case :set-item true :group (= type :group))}
-     [:div {:class (stl/css :set-icon)} icon]
-     [:span {:class (stl/css :set-name)} name]
-     (when children
-       [:div {:class (stl/css :set-children)}
-        (for [child-id children]
-          (do
-            (println "Rendering child ID:" child-id)
-            ^{:key (str child-id)} [render-set child-id]))])]))
+  (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
+        [:div {:class (stl/css-case :set-item true :group (= type :group))}
+         [:div {:class (stl/css :set-icon)} icon]
+         [:span {:class (stl/css :set-name)} name]
+         (when children
+           [:div {:class (stl/css :set-children)}
+            (for [child-id children]
+              (do
+                (println "Rendering child ID:" child-id)
+                ^{:key (str child-id)} [:& render-set {:key (str child-id):set-id child-id}]))])]))))
 
 (mf/defc sets-list
   {::mf/wrap-props false}

From 1434ddb5d58b1907cc9b94598ff1dc344780adb1 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Wed, 7 Aug 2024 20:58:21 +0530
Subject: [PATCH 03/33] change fotn color

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 9 +++++----
 frontend/src/app/main/ui/workspace/tokens/sets.scss | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 023c1eae9..05601080d 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -32,7 +32,7 @@
                                                          :name "Set Root 2"}})
 
 
-(mf/defc render-set
+(mf/defc sets-tree
   [{:keys [set-id]}]
   (println "Rendering set with ID:" set-id)
   (let [set (get sets set-id)]
@@ -40,14 +40,15 @@
       (let [{:keys [type name children]} set
             icon (if (= type :group) i/document i/document)] ;; Correct icon for groups
         [:div {:class (stl/css-case :set-item true :group (= type :group))}
-         [:div {:class (stl/css :set-icon)} icon]
+         [:div {:class (stl/css :set-icon)}
+          [:svg {:class (stl/css :set-icon-svg)} icon]]
          [:span {:class (stl/css :set-name)} name]
          (when children
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
                 (println "Rendering child ID:" child-id)
-                ^{:key (str child-id)} [:& render-set {:key (str child-id):set-id child-id}]))])]))))
+                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id}]))])]))))
 
 (mf/defc sets-list
   {::mf/wrap-props false}
@@ -56,7 +57,7 @@
   [:div.assets-bar
    (for [set-id sets-root-order]
      ^{:key (str set-id)}
-     [:& render-set {:key (str set-id) :set-id set-id}])])
+     [:& sets-tree {:key (str set-id) :set-id set-id}])])
 
 (mf/defc sets-sidebar
   {::mf/wrap-props false}
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 7a24a23d8..1b54a602b 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -20,7 +20,7 @@
   align-items: center;
   justify-content: space-between;
   margin-left: $s-2;
-  color: var(--title-foreground-color-hover);
+  color: var(--layer-row-foreground-color);
 }
 
 .add-button {
@@ -46,6 +46,7 @@
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
+  color: var(--layer-row-foreground-color);
   &.group {
     padding-left: $s-12;
   }

From fcea98958693dd0f180ec5416130a5fcd0eca92b Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Wed, 7 Aug 2024 22:39:41 +0530
Subject: [PATCH 04/33] add more changes

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 10 ++++----
 .../app/main/ui/workspace/tokens/sets.scss    | 17 ++++++-------
 .../app/main/ui/workspace/tokens/sidebar.cljs |  6 +++--
 .../app/main/ui/workspace/tokens/sidebar.scss | 24 ++++++++++++++++++-
 4 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 05601080d..affad9f6f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/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]])
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 1b54a602b..d26bb6e7a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/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);
     }
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index e976a9510..c4bbfc798 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/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
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 67ff95ee0..d42befb06 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/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 {

From b28a45c2d8a0d7e2f6251b3421939d6b32db8287 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Thu, 8 Aug 2024 00:14:36 +0530
Subject: [PATCH 05/33] add more changes working tree display

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 35 +++++++++++++------
 .../app/main/ui/workspace/tokens/sets.scss    | 32 +++++++++++------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index affad9f6f..58304a8b7 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -2,6 +2,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.main.ui.icons :as i]
+   [app.main.ui.components.title-bar :refer [title-bar]]
    [rumext.v2 :as mf]))
 
 ;; Sample data
@@ -32,28 +33,34 @@
                                                          :name "Set Root 2"}})
 
 
+(mf/defc set-item
+  [{:keys [icon name]}]
+  [:div {:class (stl/css :set-item)}
+   [:span {:class (stl/css :icon)} icon]
+   [:span {:class (stl/css :set-name)} name]])
+   
 (mf/defc sets-tree
   [{:keys [set-id]}]
-  (println "Rendering set with ID:" set-id)
+  ;;(println "Rendering set with ID:" set-id)
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
-            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]]
-         [:span {:class (stl/css :set-name)} name]
+            icon i/document]
+        [:div {:class (stl/css :set-item-container)}
+          [:div {:class (stl/css :set-item)}
+         [:span {:class (stl/css :icon)} icon]
+         [:div {:class (stl/css :set-name)} name]]
          (when children
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
-                (println "Rendering child ID:" child-id)
+                ;;(println "Rendering child ID:" child-id)
                 ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id}]))])]))))
 
 (mf/defc sets-list
   {::mf/wrap-props false}
   []
-  (println "Rendering Sets List with root order:" sets-root-order)
+  ;;(println "Rendering Sets List with root order:" sets-root-order)
   [:div {:class (stl/css :sets-list)}
    (for [set-id sets-root-order]
      ^{:key (str set-id)}
@@ -62,11 +69,17 @@
 (mf/defc sets-sidebar
   {::mf/wrap-props false}
   []
-  (println "Rendering sets sidebar")
+  
+  (let [open? (mf/use-state true)]
+  (println "Rendering sets sidebar" open?)
   [:div {:class (stl/css :sets-sidebar)}
    [:div {:class (stl/css :sidebar-header)}
-    "SETS"
+   [:& 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]]
-   [:& sets-list]])
+     (when @open?
+   [:& sets-list])]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index d26bb6e7a..be7cf1caf 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -43,34 +43,44 @@
   overflow-y: auto;
 }
 
+.set-item-container {
+  width: 100%;
+  cursor: pointer;
+  color: var(--layer-row-foreground-color);
+  padding-left: 20px;
+}
+
 .set-item {
-  @include bodySmallTypography;
+  display: flex;
+  align-items: center;
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
   color: var(--layer-row-foreground-color);
+
   &.group {
     padding-left: $s-12;
   }
+
   .set-name {
     @include textEllipsis;
     flex-grow: 1;
     padding-left: $s-2;
   }
-  .set-icon {
-    @include flexCenter;
-    height: $s-20; 
-    width: $s-20;   
-    padding: 0 $s-4 0 $s-8;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    width: $s-20;
+    height: $s-20;
+    padding-right: $s-4;
+
     svg {
-      height: $s-20;  
-      width: $s-20;  
+      height: $s-20;
+      width: $s-20;
       color: white;
       fill: none;
       stroke: var(--icon-foreground);
     }
   }
-  .set-children {
-    padding-left: $s-12;
-  }
 }

From bb3a22a219496d5577f66b9eafbc186159d7421f Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Thu, 8 Aug 2024 18:46:58 +0530
Subject: [PATCH 06/33] add hide/show icon

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 28 +++++++++++--------
 .../app/main/ui/workspace/tokens/sets.scss    |  9 ++++++
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 58304a8b7..fc947c7e1 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -31,40 +31,44 @@
                                                          :name "Set Root 1"}
            #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
                                                          :name "Set Root 2"}})
-
-
-(mf/defc set-item
-  [{:keys [icon name]}]
-  [:div {:class (stl/css :set-item)}
-   [:span {:class (stl/css :icon)} icon]
-   [:span {:class (stl/css :set-name)} name]])
    
 (mf/defc sets-tree
-  [{:keys [set-id]}]
+  [{:keys [set-id toggle-visibility]}]
   ;;(println "Rendering set with ID:" set-id)
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
-            icon i/document]
+            icon i/document
+            visible? (mf/use-state (contains? active-sets set-id))]
         [:div {:class (stl/css :set-item-container)}
           [:div {:class (stl/css :set-item)}
          [:span {:class (stl/css :icon)} icon]
-         [:div {:class (stl/css :set-name)} name]]
+         [:div {:class (stl/css :set-name)} name]
+         (when (= type :set)
+         [:span {:class (stl/css :action-btn)
+           :on-click #(swap! visible? not)}
+           (if @visible?
+               i/shown
+               i/hide)])]
          (when children
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
                 ;;(println "Rendering child ID:" child-id)
-                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id}]))])]))))
+                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :toggle-visibility toggle-visibility }]))])]))))
 
 (mf/defc sets-list
   {::mf/wrap-props false}
   []
   ;;(println "Rendering Sets List with root order:" sets-root-order)
+  (let [toggle-visibility (fn [set-id]
+                            (if (contains? active-sets set-id)
+                              (swap! active-sets disj set-id)
+                              (swap! active-sets conj set-id)))]
   [: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}])])
+     [:& sets-tree {:key (str set-id) :set-id set-id}])]))
 
 (mf/defc sets-sidebar
   {::mf/wrap-props false}
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index be7cf1caf..3da55df5f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -84,3 +84,12 @@
     }
   }
 }
+
+.action-btn {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
+  }
+}

From b93b0b209a24bf5c558b7d599f8d3c62eb5d20d4 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Thu, 8 Aug 2024 21:40:35 +0530
Subject: [PATCH 07/33] Add hover styles and collapse capabilities

---
 .../src/app/main/ui/workspace/tokens/sets.cljs | 11 +++++++----
 .../src/app/main/ui/workspace/tokens/sets.scss | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index fc947c7e1..520fbd79f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -39,10 +39,13 @@
     (when set
       (let [{:keys [type name children]} set
             icon i/document
-            visible? (mf/use-state (contains? active-sets set-id))]
+            visible? (mf/use-state (contains? active-sets set-id))
+            collapsed? (mf/use-state false)]
         [:div {:class (stl/css :set-item-container)}
-          [:div {:class (stl/css :set-item)}
-         [:span {:class (stl/css :icon)} icon]
+          [:div {:class (stl/css-case :set-item-group (= type :group)
+                                      :set-item-set (= type :set))}
+         [:span {:class (stl/css :icon)
+                 :on-click #(when (= type :group) (swap! collapsed? not))} icon]
          [:div {:class (stl/css :set-name)} name]
          (when (= type :set)
          [:span {:class (stl/css :action-btn)
@@ -50,7 +53,7 @@
            (if @visible?
                i/shown
                i/hide)])]
-         (when children
+          (when (and children (not @collapsed?))
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 3da55df5f..54015fe93 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -50,18 +50,14 @@
   padding-left: 20px;
 }
 
-.set-item {
+.set-item-set, .set-item-group {
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
   color: var(--layer-row-foreground-color);
-
-  &.group {
-    padding-left: $s-12;
-  }
-
   .set-name {
     @include textEllipsis;
     flex-grow: 1;
@@ -85,10 +81,16 @@
   }
 }
 
+.set-item-set{
+  &:hover {
+    background-color: var(--layer-row-background-color-hover);
+    color: var(--layer-row-foreground-color-hover);
+  }
+}
 .action-btn {
   @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
+  height: $s-20;
+  width: $s-20;
   svg {
     @extend .button-icon;
   }

From ad9a4e7244f1d96ab3816757cff8a4ef1c3112c5 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 01:17:18 +0530
Subject: [PATCH 08/33] Add full lenght highlight

---
 frontend/src/app/main/ui/workspace/tokens/sets.scss    | 9 ++++++++-
 frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 3 ---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 54015fe93..e6a8a9aa9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -48,6 +48,11 @@
   cursor: pointer;
   color: var(--layer-row-foreground-color);
   padding-left: 20px;
+  
+  /*&:hover{
+    box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover);
+  }*/
+
 }
 
 .set-item-set, .set-item-group {
@@ -57,7 +62,7 @@
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
-  color: var(--layer-row-foreground-color);
+  color: var(--layer-row-foreground-color); 
   .set-name {
     @include textEllipsis;
     flex-grow: 1;
@@ -85,6 +90,8 @@
   &:hover {
     background-color: var(--layer-row-background-color-hover);
     color: var(--layer-row-foreground-color-hover);
+    box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
+
   }
 }
 .action-btn {
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index d42befb06..4f2fd9bee 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -12,9 +12,6 @@
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  padding: $s-12;
-  //justify-content: space-evenly;
-//  align-items: flex-start;
 }
 
 .sets-sidebar {

From bcf61f34fe0625e51cacea59cc803774c5d2633b Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 14:11:30 +0530
Subject: [PATCH 09/33] add current set and selected set

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 50 ++++++++++++++-----
 .../app/main/ui/workspace/tokens/sets.scss    | 48 +++++++++++++++++-
 2 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 520fbd79f..25c64ec19 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -3,6 +3,11 @@
   (:require
    [app.main.ui.icons :as i]
    [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.context :as ctx]
+   [app.main.store :as st]
+   [app.common.data.macros :as dm]
+   [app.util.dom :as dom]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 ;; Sample data
@@ -31,19 +36,39 @@
                                                          :name "Set Root 1"}
            #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
                                                          :name "Set Root 2"}})
+
+(defn set-current-set
+  [set-id]
+  (println "here")
+  (dm/assert! (uuid? set-id))  
+  (ptk/reify ::set-current-set  
+    ptk/UpdateEvent
+    (update [_ state] 
+              (assoc state :current-set-id set-id)))) 
+
    
 (mf/defc sets-tree
-  [{:keys [set-id toggle-visibility]}]
-  ;;(println "Rendering set with ID:" set-id)
+  [{:keys [current-set-id set-id toggle-visibility]}]
+  (println "Rendering set with ID:" set-id)  
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
             icon i/document
             visible? (mf/use-state (contains? active-sets set-id))
-            collapsed? (mf/use-state false)]
-        [:div {:class (stl/css :set-item-container)}
+            collapsed? (mf/use-state false)
+            selected? (mf/use-state (= set-id current-set-id))
+
+          on-click
+          (mf/use-fn
+          (mf/deps type set-id)
+           #(st/emit! (set-current-set set-id))
+          )]
+         (println "current set id is" current-set-id @selected?)
+        [:div {:class (stl/css :set-item-container)
+               :on-click on-click}
           [:div {:class (stl/css-case :set-item-group (= type :group)
-                                      :set-item-set (= type :set))}
+                                      :set-item-set-selected  @selected?
+                                      :set-item-set (and (= type :set ) (not @selected?)))}
          [:span {:class (stl/css :icon)
                  :on-click #(when (= type :group) (swap! collapsed? not))} icon]
          [:div {:class (stl/css :set-name)} name]
@@ -58,11 +83,10 @@
             (for [child-id children]
               (do
                 ;;(println "Rendering child ID:" child-id)
-                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :toggle-visibility toggle-visibility }]))])]))))
+                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :current-set-id current-set-id :toggle-visibility toggle-visibility}]))])]))))
 
 (mf/defc sets-list
-  {::mf/wrap-props false}
-  []
+  [{:keys [current-set-id]}]
   ;;(println "Rendering Sets List with root order:" sets-root-order)
   (let [toggle-visibility (fn [set-id]
                             (if (contains? active-sets set-id)
@@ -71,13 +95,13 @@
   [: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}])]))
+     [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])]))
 
 (mf/defc sets-sidebar
-  {::mf/wrap-props false}
   []
-  
-  (let [open? (mf/use-state true)]
+  (let [current-set-id (:current-set-id @st/state)
+        ;;current-set-id (deref current-set-id*)
+    open? (mf/use-state true)]
   (println "Rendering sets sidebar" open?)
   [:div {:class (stl/css :sets-sidebar)}
    [:div {:class (stl/css :sidebar-header)}
@@ -89,4 +113,4 @@
               :on-click #(println "Add Set")} 
      i/add]]
      (when @open?
-   [:& sets-list])]))
+   [:& sets-list {:current-set-id current-set-id}])]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index e6a8a9aa9..ff4c95991 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -48,7 +48,6 @@
   cursor: pointer;
   color: var(--layer-row-foreground-color);
   padding-left: 20px;
-  
   /*&:hover{
     box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover);
   }*/
@@ -94,6 +93,53 @@
 
   }
 }
+
+.selected-set {
+  background-color: var(--layer-row-background-color-selected);
+  color: var(--layer-row-foreground-color-selected);
+  box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected);
+}
+
+.set-item-set-selected {
+  @include bodySmallTypography;
+  display: flex;
+  align-items: center;
+  min-height: $s-32;
+  width: 100%;
+  cursor: pointer;
+  //color: var(--layer-row-foreground-color); 
+  background-color: var(--layer-row-background-color-selected);
+  color: var(--layer-row-foreground-color-selected);
+  box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected);
+
+  .set-name {
+    @include textEllipsis;
+    flex-grow: 1;
+    padding-left: $s-2;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    width: $s-20;
+    height: $s-20;
+    padding-right: $s-4;
+
+    svg {
+      height: $s-20;
+      width: $s-20;
+      color: white;
+      fill: none;
+      stroke: var(--icon-foreground);
+    }
+  }
+  &:hover {
+    background-color: var(--layer-row-background-color-hover);
+    color: var(--layer-row-foreground-color-hover);
+    box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
+
+  }
+}
 .action-btn {
   @extend .button-tertiary;
   height: $s-20;

From fa230a4224355b415f24ec8cb3675c3dab3cfb49 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 19:31:34 +0530
Subject: [PATCH 10/33] add folder-open icon and use for open groups

---
 frontend/resources/images/icons/folder-open.svg     | 7 +++++++
 frontend/src/app/main/ui/icons.cljs                 | 1 +
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 5 ++++-
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 frontend/resources/images/icons/folder-open.svg

diff --git a/frontend/resources/images/icons/folder-open.svg b/frontend/resources/images/icons/folder-open.svg
new file mode 100644
index 000000000..ef5d15ab8
--- /dev/null
+++ b/frontend/resources/images/icons/folder-open.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
+  <g data-testid="Icons / Tools + Layers / S / Open folder S">
+    <g class="frame-children" data-testid="svg-path">
+      <path d="m3.5 12.339 1.652-5.363a.75.75 0 0 1 .717-.53h7.074a.75.75 0 0 1 .708.998l-1.538 4.393a.75.75 0 0 1-.708.502H3.5Za.75.75 0 0 1-.75-.75V4.622c0-.297.112-.582.314-.793.201-.211.473-.329.757-.329h2.143l.804 1.263h4.071a.75.75 0 0 1 .75.75v.933" fill="none" stroke-width="1" stroke="#8f9da3" stroke-opacity="1"/>
+    </g>
+  </g>
+</svg>
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 319119424..ca19dc77b 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -121,6 +121,7 @@
 (def ^:icon flex (icon-xref :flex))
 (def ^:icon flip-horizontal (icon-xref :flip-horizontal))
 (def ^:icon flip-vertical (icon-xref :flip-vertical))
+(def ^:icon folder-open (icon-xref :folder-open))
 (def ^:icon gap-horizontal (icon-xref :gap-horizontal))
 (def ^:icon gap-vertical (icon-xref :gap-vertical))
 (def ^:icon graphics (icon-xref :graphics))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 25c64ec19..54b627b92 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -53,9 +53,12 @@
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
-            icon i/document
             visible? (mf/use-state (contains? active-sets set-id))
             collapsed? (mf/use-state false)
+            icon (cond
+                   (= 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

From 950257a212aa5a41702b90ee170a29d37015679c Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 20:42:42 +0530
Subject: [PATCH 11/33] change eye icon size

---
 frontend/src/app/main/ui/workspace/tokens/sets.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index ff4c95991..1dd0472c6 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -146,5 +146,7 @@
   width: $s-20;
   svg {
     @extend .button-icon;
+    width: 12px;
+    height: 12px;
   }
 }

From 7addba71fbb4dbb1879e7c36e2a1dcb6ea09be88 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 21:07:52 +0530
Subject: [PATCH 12/33] remove debug statements

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 54b627b92..1a9fe3c6d 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -10,7 +10,6 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-;; Sample data
 (def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
                    #uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
 
@@ -85,12 +84,10 @@
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
-                ;;(println "Rendering child ID:" child-id)
                 ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :current-set-id current-set-id :toggle-visibility toggle-visibility}]))])]))))
 
 (mf/defc sets-list
   [{:keys [current-set-id]}]
-  ;;(println "Rendering Sets List with root order:" sets-root-order)
   (let [toggle-visibility (fn [set-id]
                             (if (contains? active-sets set-id)
                               (swap! active-sets disj set-id)
@@ -103,9 +100,7 @@
 (mf/defc sets-sidebar
   []
   (let [current-set-id (:current-set-id @st/state)
-        ;;current-set-id (deref current-set-id*)
     open? (mf/use-state true)]
-  (println "Rendering sets sidebar" open?)
   [:div {:class (stl/css :sets-sidebar)}
    [:div {:class (stl/css :sidebar-header)}
    [:& title-bar {:collapsable true

From 68c0d93f91d582244004dae361a8d04b2068f5c9 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 21:12:38 +0530
Subject: [PATCH 13/33] change sets list div to ul

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 1a9fe3c6d..c625a0316 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -92,7 +92,7 @@
                             (if (contains? active-sets set-id)
                               (swap! active-sets disj set-id)
                               (swap! active-sets conj set-id)))]
-  [:div {:class (stl/css :sets-list)}
+  [:ul {: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 :current-set-id current-set-id}])]))

From 66170eb889b83ae4250c1a88eaffe92beca76faa Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 21:42:08 +0530
Subject: [PATCH 14/33] make current-set-id the key on div element

---
 .../src/app/main/ui/workspace/tokens/sets.cljs   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index c625a0316..3a870fcdc 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -8,8 +8,13 @@
    [app.common.data.macros :as dm]
    [app.util.dom :as dom]
    [potok.v2.core :as ptk]
+   [okulary.core :as l]
    [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"})
 
@@ -38,17 +43,14 @@
 
 (defn set-current-set
   [set-id]
-  (println "here")
   (dm/assert! (uuid? set-id))  
   (ptk/reify ::set-current-set  
     ptk/UpdateEvent
     (update [_ state] 
               (assoc state :current-set-id set-id)))) 
 
-   
 (mf/defc sets-tree
   [{:keys [current-set-id set-id toggle-visibility]}]
-  (println "Rendering set with ID:" set-id)  
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
@@ -65,7 +67,6 @@
           (mf/deps type set-id)
            #(st/emit! (set-current-set set-id))
           )]
-         (println "current set id is" current-set-id @selected?)
         [:div {:class (stl/css :set-item-container)
                :on-click on-click}
           [:div {:class (stl/css-case :set-item-group (= type :group)
@@ -99,9 +100,10 @@
 
 (mf/defc sets-sidebar
   []
-  (let [current-set-id (:current-set-id @st/state)
-    open? (mf/use-state true)]
-  [:div {:class (stl/css :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?)

From 46c73fe51f17b231f7e4c72b41897dbc91360559 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 21:44:08 +0530
Subject: [PATCH 15/33] formatting

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 79 +++++++++----------
 .../app/main/ui/workspace/tokens/sets.scss    | 12 ++-
 2 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 3a870fcdc..fbb2b2a88 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -1,14 +1,14 @@
 (ns app.main.ui.workspace.tokens.sets
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.icons :as i]
+   [app.common.data.macros :as dm]
+   [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.context :as ctx]
-   [app.main.store :as st]
-   [app.common.data.macros :as dm]
+   [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [potok.v2.core :as ptk]
    [okulary.core :as l]
+   [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
 
@@ -43,11 +43,11 @@
 
 (defn set-current-set
   [set-id]
-  (dm/assert! (uuid? set-id))  
-  (ptk/reify ::set-current-set  
+  (dm/assert! (uuid? set-id))
+  (ptk/reify ::set-current-set
     ptk/UpdateEvent
-    (update [_ state] 
-              (assoc state :current-set-id set-id)))) 
+    (update [_ state]
+      (assoc state :current-set-id set-id))))
 
 (mf/defc sets-tree
   [{:keys [current-set-id set-id toggle-visibility]}]
@@ -59,29 +59,28 @@
             icon (cond
                    (= type :set) i/document
                    (and (= type :group) @collapsed?) i/group
-                       :else i/folder-open)
+                   :else i/folder-open)
             selected? (mf/use-state (= set-id current-set-id))
 
-          on-click
-          (mf/use-fn
-          (mf/deps type set-id)
-           #(st/emit! (set-current-set set-id))
-          )]
+            on-click
+            (mf/use-fn
+             (mf/deps type set-id)
+             #(st/emit! (set-current-set set-id)))]
         [:div {:class (stl/css :set-item-container)
                :on-click on-click}
-          [:div {:class (stl/css-case :set-item-group (= type :group)
-                                      :set-item-set-selected  @selected?
-                                      :set-item-set (and (= type :set ) (not @selected?)))}
-         [:span {:class (stl/css :icon)
-                 :on-click #(when (= type :group) (swap! collapsed? not))} icon]
-         [:div {:class (stl/css :set-name)} name]
-         (when (= type :set)
-         [:span {:class (stl/css :action-btn)
-           :on-click #(swap! visible? not)}
-           (if @visible?
+         [:div {:class (stl/css-case :set-item-group (= type :group)
+                                     :set-item-set-selected  @selected?
+                                     :set-item-set (and (= type :set) (not @selected?)))}
+          [:span {:class (stl/css :icon)
+                  :on-click #(when (= type :group) (swap! collapsed? not))} icon]
+          [:div {:class (stl/css :set-name)} name]
+          (when (= type :set)
+            [:span {:class (stl/css :action-btn)
+                    :on-click #(swap! visible? not)}
+             (if @visible?
                i/shown
                i/hide)])]
-          (when (and children (not @collapsed?))
+         (when (and children (not @collapsed?))
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
@@ -93,24 +92,24 @@
                             (if (contains? active-sets set-id)
                               (swap! active-sets disj set-id)
                               (swap! active-sets conj set-id)))]
-  [:ul {: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 :current-set-id current-set-id}])]))
+    [:ul {: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 :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]]
+    [: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}])]))
+       [:& sets-list {:current-set-id current-set-id}])]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 1dd0472c6..ff30f6ad8 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -51,17 +51,17 @@
   /*&:hover{
     box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover);
   }*/
-
 }
 
-.set-item-set, .set-item-group {
+.set-item-set,
+.set-item-group {
   @include bodySmallTypography;
   display: flex;
   align-items: center;
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
-  color: var(--layer-row-foreground-color); 
+  color: var(--layer-row-foreground-color);
   .set-name {
     @include textEllipsis;
     flex-grow: 1;
@@ -85,12 +85,11 @@
   }
 }
 
-.set-item-set{
+.set-item-set {
   &:hover {
     background-color: var(--layer-row-background-color-hover);
     color: var(--layer-row-foreground-color-hover);
     box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
-
   }
 }
 
@@ -107,7 +106,7 @@
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
-  //color: var(--layer-row-foreground-color); 
+  //color: var(--layer-row-foreground-color);
   background-color: var(--layer-row-background-color-selected);
   color: var(--layer-row-foreground-color-selected);
   box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected);
@@ -137,7 +136,6 @@
     background-color: var(--layer-row-background-color-hover);
     color: var(--layer-row-foreground-color-hover);
     box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
-
   }
 }
 .action-btn {

From 007cf0fb8aef9604eaf4a140d3fb057c1431cd7d Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 21:50:55 +0530
Subject: [PATCH 16/33] remove comments and unused import

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 2 --
 frontend/src/app/main/ui/workspace/tokens/sets.scss | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index fbb2b2a88..e75a43ac3 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -4,14 +4,12 @@
    [app.common.data.macros :as dm]
    [app.main.store :as st]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [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))
 
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index ff30f6ad8..18489e2ef 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -48,9 +48,6 @@
   cursor: pointer;
   color: var(--layer-row-foreground-color);
   padding-left: 20px;
-  /*&:hover{
-    box-shadow: 20px 0 0 0 var(--layer-row-background-color-hover);
-  }*/
 }
 
 .set-item-set,

From 21c42626ae634ea98606a49ea80a7ec206083c35 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 13 Aug 2024 21:51:31 +0530
Subject: [PATCH 17/33] remove comment

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 4f2fd9bee..18ea94eec 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -17,7 +17,7 @@
 .sets-sidebar {
   flex-shrink: 0;
   overflow-y: auto;
-  max-height: 40%;  // Adjust this value as needed
+  max-height: 40%;
 }
 
 .tokens-section-wrapper {

From 74c6228c25459a92c3d4fe8e6508299196aceb59 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Wed, 14 Aug 2024 17:15:30 +0530
Subject: [PATCH 18/33] add dom/stop-propagation

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index e75a43ac3..2c369d4f5 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -63,7 +63,9 @@
             on-click
             (mf/use-fn
              (mf/deps type set-id)
-             #(st/emit! (set-current-set set-id)))]
+             (fn [event]
+               (dom/stop-propagation event)
+               (st/emit! (set-current-set set-id))))]
         [:div {:class (stl/css :set-item-container)
                :on-click on-click}
          [:div {:class (stl/css-case :set-item-group (= type :group)

From 98b5791e273115cd7edea8287708512033e8df1d Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 15:37:37 +0530
Subject: [PATCH 19/33] remove set-item-set-selected and remove class

---
 .../app/main/ui/workspace/tokens/sets.cljs    |  4 +-
 .../app/main/ui/workspace/tokens/sets.scss    | 41 +------------------
 2 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 2c369d4f5..dae3da556 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -69,8 +69,8 @@
         [:div {:class (stl/css :set-item-container)
                :on-click on-click}
          [:div {:class (stl/css-case :set-item-group (= type :group)
-                                     :set-item-set-selected  @selected?
-                                     :set-item-set (and (= type :set) (not @selected?)))}
+                                     :set-item-set  (= type :set)
+                                     :selected-set  (and (= type :set) @selected?))}
           [:span {:class (stl/css :icon)
                   :on-click #(when (= type :group) (swap! collapsed? not))} icon]
           [:div {:class (stl/css :set-name)} name]
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 18489e2ef..66c887109 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -93,48 +93,9 @@
 .selected-set {
   background-color: var(--layer-row-background-color-selected);
   color: var(--layer-row-foreground-color-selected);
-  box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected);
+  box-shadow: -100px 0 0 0 var(--layer-row-background-color-selected);
 }
 
-.set-item-set-selected {
-  @include bodySmallTypography;
-  display: flex;
-  align-items: center;
-  min-height: $s-32;
-  width: 100%;
-  cursor: pointer;
-  //color: var(--layer-row-foreground-color);
-  background-color: var(--layer-row-background-color-selected);
-  color: var(--layer-row-foreground-color-selected);
-  box-shadow: -20px 0 0 0 var(--layer-row-background-color-selected);
-
-  .set-name {
-    @include textEllipsis;
-    flex-grow: 1;
-    padding-left: $s-2;
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    width: $s-20;
-    height: $s-20;
-    padding-right: $s-4;
-
-    svg {
-      height: $s-20;
-      width: $s-20;
-      color: white;
-      fill: none;
-      stroke: var(--icon-foreground);
-    }
-  }
-  &:hover {
-    background-color: var(--layer-row-background-color-hover);
-    color: var(--layer-row-foreground-color-hover);
-    box-shadow: -100px 0 0 0 var(--layer-row-background-color-hover);
-  }
-}
 .action-btn {
   @extend .button-tertiary;
   height: $s-20;

From e4f5b6005eb1a8ac5b6705beb7ad3e1579dbcc00 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 16:30:38 +0530
Subject: [PATCH 20/33] move sets-sidebar component to sidebar tokens

---
 .../app/main/ui/workspace/tokens/sidebar.cljs | 24 ++++++++++++--
 .../app/main/ui/workspace/tokens/sidebar.scss | 32 +++++++++++++++++--
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index c4bbfc798..f2efba40c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -20,7 +20,8 @@
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-types :as wtty]
-   [app.main.ui.workspace.tokens.sets :refer [sets-sidebar]]
+   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.workspace.tokens.sets :refer [sets-list]]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -33,6 +34,9 @@
 (def ^:private download-icon
   (i/icon-xref :download (stl/css :download-icon)))
 
+(def current-set-id
+  (l/derived :current-set-id st/state))
+
 (mf/defc token-pill
   {::mf/wrap-props false}
   [{:keys [on-click token highlighted? on-context-menu]}]
@@ -167,13 +171,29 @@
                              :tokens tokens
                              :token-type-props token-type-props}])]]))
 
+(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}])]))
+
 (mf/defc tokens-sidebar-tab
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
    [:& sets-sidebar]
-   ;;[:div {:class (stl/css :divider)}]
    [:div {:class (stl/css :tokens-section-wrapper)} 
     [:& tokens-explorer]]
    [:button {:class (stl/css :download-json-button)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 18ea94eec..252d38ea8 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -15,11 +15,39 @@
 }
 
 .sets-sidebar {
-  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  height: var(--height, $s-200);
   overflow-y: auto;
-  max-height: 40%;
 }
 
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: $s-2;
+  padding-top: $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);
+  }
+}
+
+
+
 .tokens-section-wrapper {
   flex: 1;
   overflow-y: auto;

From 4bad9fa6f889965e9044389ec982109eef2b52fd Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 16:30:51 +0530
Subject: [PATCH 21/33] add chevron icon

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 39 ++++---------
 .../app/main/ui/workspace/tokens/sets.scss    | 56 +++++++++----------
 2 files changed, 37 insertions(+), 58 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index dae3da556..d7637410e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/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
-                   (= type :set) i/document
-                   (and (= type :group) @collapsed?) i/group
-                   :else i/folder-open)
+            icon (if (= type :set) i/document i/group)
             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)
-                  :on-click #(when (= type :group) (swap! collapsed? not))} icon]
+          (when (= type :group)
+          [: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}])]))
+       
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 66c887109..adfbfe0c6 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/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);
+}

From d4c88d444161421134b5dc47803922d05e972209 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 16:32:36 +0530
Subject: [PATCH 22/33] remove folder open icon

---
 frontend/resources/images/icons/folder-open.svg | 7 -------
 frontend/src/app/main/ui/icons.cljs             | 1 -
 2 files changed, 8 deletions(-)
 delete mode 100644 frontend/resources/images/icons/folder-open.svg

diff --git a/frontend/resources/images/icons/folder-open.svg b/frontend/resources/images/icons/folder-open.svg
deleted file mode 100644
index ef5d15ab8..000000000
--- a/frontend/resources/images/icons/folder-open.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
-  <g data-testid="Icons / Tools + Layers / S / Open folder S">
-    <g class="frame-children" data-testid="svg-path">
-      <path d="m3.5 12.339 1.652-5.363a.75.75 0 0 1 .717-.53h7.074a.75.75 0 0 1 .708.998l-1.538 4.393a.75.75 0 0 1-.708.502H3.5Za.75.75 0 0 1-.75-.75V4.622c0-.297.112-.582.314-.793.201-.211.473-.329.757-.329h2.143l.804 1.263h4.071a.75.75 0 0 1 .75.75v.933" fill="none" stroke-width="1" stroke="#8f9da3" stroke-opacity="1"/>
-    </g>
-  </g>
-</svg>
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 8c298c350..df8f1bf3a 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -120,7 +120,6 @@
 (def ^:icon flex (icon-xref :flex))
 (def ^:icon flip-horizontal (icon-xref :flip-horizontal))
 (def ^:icon flip-vertical (icon-xref :flip-vertical))
-(def ^:icon folder-open (icon-xref :folder-open))
 (def ^:icon gap-horizontal (icon-xref :gap-horizontal))
 (def ^:icon gap-vertical (icon-xref :gap-vertical))
 (def ^:icon graphics (icon-xref :graphics))

From e62323ac0a254483a5a5285c580d8f9c1503982f Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 16:35:33 +0530
Subject: [PATCH 23/33] add variable

---
 frontend/src/app/main/ui/workspace/tokens/sets.scss    | 5 ++---
 frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 2 --
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index adfbfe0c6..a4817d819 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -16,7 +16,7 @@
   width: 100%;
   cursor: pointer;
   color: var(--layer-row-foreground-color);
-  padding-left: 20px;
+  padding-left: $s-20;
 }
 
 .set-item-set,
@@ -95,8 +95,7 @@
 
 .chevron-icon {
   @extend .button-icon-small;
-  //color: var(--icon-foreground);
-  margin-right: 5px;
+  margin-right: $s-6;
   transform: rotate(var(--chevron-icon-rotation));
   stroke: var(--icon-foreground);
 }
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 252d38ea8..e65b85a03 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -46,8 +46,6 @@
   }
 }
 
-
-
 .tokens-section-wrapper {
   flex: 1;
   overflow-y: auto;

From f052b75dacb0c256642ef2b9ed8d212fedb9183d Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 16:38:18 +0530
Subject: [PATCH 24/33] formatting

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs  | 12 ++++++------
 .../src/app/main/ui/workspace/tokens/sidebar.cljs    |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index d7637410e..29dc27923 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -68,11 +68,11 @@
                                      :set-item-set  (= type :set)
                                      :selected-set  (and (= type :set) @selected?))}
           (when (= type :group)
-          [:span {:class (stl/css-case
-                           :collapsabled-icon true
-                           :collapsed @collapsed?)
-                  :on-click #(when (= type :group) (swap! collapsed? not))}
-            chevron-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)
@@ -97,4 +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}])]))
-       
+
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index f2efba40c..7ea4e49ec 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -12,16 +12,16 @@
    [app.main.data.tokens :as dt]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
    [app.main.ui.workspace.tokens.changes :as wtch]
    [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
    [app.main.ui.workspace.tokens.core :as wtc]
+   [app.main.ui.workspace.tokens.sets :refer [sets-list]]
    [app.main.ui.workspace.tokens.style-dictionary :as sd]
    [app.main.ui.workspace.tokens.token :as wtt]
    [app.main.ui.workspace.tokens.token-types :as wtty]
-   [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.workspace.tokens.sets :refer [sets-list]]
    [app.util.dom :as dom]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -194,7 +194,7 @@
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
    [:& sets-sidebar]
-   [:div {:class (stl/css :tokens-section-wrapper)} 
+   [:div {:class (stl/css :tokens-section-wrapper)}
     [:& tokens-explorer]]
    [:button {:class (stl/css :download-json-button)
              :on-click wtc/download-tokens-as-json}

From feb5cec84b0710100a41a2e0ca6d2e4a18a20177 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 16:57:53 +0530
Subject: [PATCH 25/33] ad sets-section wrapper

---
 .../src/app/main/ui/workspace/tokens/sidebar.cljs | 15 ++++++++-------
 .../src/app/main/ui/workspace/tokens/sidebar.scss | 12 ++++++------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 7ea4e49ec..49d853274 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -193,10 +193,11 @@
    ::mf/wrap-props false}
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
-   [:& sets-sidebar]
-   [: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
-    "Export JSON"]])
+    [:div {:class (stl/css :sets-section-wrapper)}
+    [:& sets-sidebar]]
+    [: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
+      "Export JSON"]])
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index e65b85a03..e82a91ca9 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -14,14 +14,14 @@
   overflow: hidden;
 }
 
-.sets-sidebar {
-  position: relative;
+.sets-section-wrapper {
   display: flex;
   flex-direction: column;
-  flex: 1;
-  width: 100%;
-  height: var(--height, $s-200);
-  overflow-y: auto;
+  margin-bottom: $s-8;
+}
+
+.sets-sidebar {
+  position: relative;
 }
 
 .sidebar-header {

From 187ab31667432bda53ff914c18fa96b0050d6581 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 17:00:19 +0530
Subject: [PATCH 26/33] format

---
 .../src/app/main/ui/workspace/tokens/sidebar.cljs  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 49d853274..9e3cc412f 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -193,11 +193,11 @@
    ::mf/wrap-props false}
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
-    [:div {:class (stl/css :sets-section-wrapper)}
+   [:div {:class (stl/css :sets-section-wrapper)}
     [:& sets-sidebar]]
-    [: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
-      "Export JSON"]])
+   [: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
+    "Export JSON"]])

From 3a2f4df3878b86f899f30bdde95ee5bb0e714efb Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 17:08:31 +0530
Subject: [PATCH 27/33] add source code comment

---
 frontend/src/app/main/ui/workspace/tokens/sets.cljs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 29dc27923..5e7401f89 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -1,3 +1,9 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
 (ns app.main.ui.workspace.tokens.sets
   (:require-macros [app.main.style :as stl])
   (:require
@@ -97,4 +103,3 @@
      (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}])]))
-

From 463ab3c866b16df2e3eeeeb4735bbb347c2aa02d Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 20:41:25 +0530
Subject: [PATCH 28/33] change current-set to selected-set

---
 .../src/app/main/ui/workspace/tokens/sets.cljs | 18 +++++++++---------
 .../app/main/ui/workspace/tokens/sidebar.cljs  | 10 +++++-----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 5e7401f89..b5b50694a 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -44,30 +44,30 @@
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
-(defn set-current-set
+(defn set-selected-set
   [set-id]
   (dm/assert! (uuid? set-id))
-  (ptk/reify ::set-current-set
+  (ptk/reify ::set-selected-set
     ptk/UpdateEvent
     (update [_ state]
-      (assoc state :current-set-id set-id))))
+      (assoc state :selected-set-id set-id))))
 
 (mf/defc sets-tree
-  [{:keys [current-set-id set-id toggle-visibility]}]
+  [{:keys [selected-set-id set-id toggle-visibility]}]
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
             visible? (mf/use-state (contains? active-sets set-id))
             collapsed? (mf/use-state false)
             icon (if (= type :set) i/document i/group)
-            selected? (mf/use-state (= set-id current-set-id))
+            selected? (mf/use-state (= set-id selected-set-id))
 
             on-click
             (mf/use-fn
              (mf/deps type set-id)
              (fn [event]
                (dom/stop-propagation event)
-               (st/emit! (set-current-set set-id))))]
+               (st/emit! (set-selected-set set-id))))]
         [:div {:class (stl/css :set-item-container)
                :on-click on-click}
          [:div {:class (stl/css-case :set-item-group (= type :group)
@@ -91,10 +91,10 @@
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
               (do
-                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :current-set-id current-set-id :toggle-visibility toggle-visibility}]))])]))))
+                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :selected-set-id selected-set-id :toggle-visibility toggle-visibility}]))])]))))
 
 (mf/defc sets-list
-  [{:keys [current-set-id]}]
+  [{:keys [selected-set-id]}]
   (let [toggle-visibility (fn [set-id]
                             (if (contains? active-sets set-id)
                               (swap! active-sets disj set-id)
@@ -102,4 +102,4 @@
     [:ul {: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 :current-set-id current-set-id}])]))
+       [:& sets-tree {:key (str set-id) :set-id set-id :selected-set-id selected-set-id}])]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 9e3cc412f..752030309 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -34,8 +34,8 @@
 (def ^:private download-icon
   (i/icon-xref :download (stl/css :download-icon)))
 
-(def current-set-id
-  (l/derived :current-set-id st/state))
+(def selected-set-id
+  (l/derived :selected-set-id st/state))
 
 (mf/defc token-pill
   {::mf/wrap-props false}
@@ -173,9 +173,9 @@
 
 (mf/defc sets-sidebar
   []
-  (let [current-set-id (mf/deref current-set-id)
+  (let [selected-set-id (mf/deref selected-set-id)
         open? (mf/use-state true)]
-    [:div {:key (str "sidebar-" current-set-id)
+    [:div {:key (str "sidebar-" selected-set-id)
            :class (stl/css :sets-sidebar)}
      [:div {:class (stl/css :sidebar-header)}
       [:& title-bar {:collapsable true
@@ -186,7 +186,7 @@
                 :on-click #(println "Add Set")}
        i/add]]
      (when @open?
-       [:& sets-list {:current-set-id current-set-id}])]))
+       [:& sets-list {:selected-set-id selected-set-id}])]))
 
 (mf/defc tokens-sidebar-tab
   {::mf/wrap [mf/memo]

From 5b1eaf4b8f30ba5f7ff9b6f9c55b7f65bfb692f9 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 20:55:02 +0530
Subject: [PATCH 29/33] remove unused prop and some optimizations

---
 .../src/app/main/ui/workspace/tokens/sets.cljs     | 14 +++++---------
 .../src/app/main/ui/workspace/tokens/sidebar.cljs  |  3 +--
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index b5b50694a..6a882ea13 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -53,7 +53,7 @@
       (assoc state :selected-set-id set-id))))
 
 (mf/defc sets-tree
-  [{:keys [selected-set-id set-id toggle-visibility]}]
+  [{:keys [selected-set-id set-id]}]
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
@@ -90,16 +90,12 @@
          (when (and children (not @collapsed?))
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
-              (do
-                ^{:key (str child-id)} [:& sets-tree {:key (str child-id) :set-id child-id :selected-set-id selected-set-id :toggle-visibility toggle-visibility}]))])]))))
+                [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])]))))
 
 (mf/defc sets-list
   [{:keys [selected-set-id]}]
-  (let [toggle-visibility (fn [set-id]
-                            (if (contains? active-sets set-id)
-                              (swap! active-sets disj set-id)
-                              (swap! active-sets conj set-id)))]
     [:ul {: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 :selected-set-id selected-set-id}])]))
+	       [:& sets-tree {:key set-id
+	                      :set-id set-id
+	                      :selected-set-id selected-set-id}])])
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 752030309..d2d6843da 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -175,8 +175,7 @@
   []
   (let [selected-set-id (mf/deref selected-set-id)
         open? (mf/use-state true)]
-    [:div {:key (str "sidebar-" selected-set-id)
-           :class (stl/css :sets-sidebar)}
+    [:div {:class (stl/css :sets-sidebar)}
      [:div {:class (stl/css :sidebar-header)}
       [:& title-bar {:collapsable true
                      :collapsed (not @open?)

From 247e3a1559dbc63eae83e37268950820c32ff548 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 21:25:22 +0530
Subject: [PATCH 30/33] fix some styling issues

---
 frontend/src/app/main/ui/workspace/tokens/sets.scss    |  4 ++--
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs |  1 +
 frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 10 ++--------
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index a4817d819..5c32bf199 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -67,8 +67,8 @@
 
 .action-btn {
   @extend .button-tertiary;
-  height: $s-20;
-  width: $s-20;
+  height: $s-28;
+  width: $s-28;
   svg {
     @extend .button-icon;
     width: 12px;
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index d2d6843da..570df9077 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -179,6 +179,7 @@
      [:div {:class (stl/css :sidebar-header)}
       [:& title-bar {:collapsable true
                      :collapsed (not @open?)
+                     :all-clickable true
                      :title "SETS"
                      :on-collapsed #(swap! open? not)}]
       [:button {:class (stl/css :add-set)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index e82a91ca9..4ef8ff21c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -28,8 +28,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-left: $s-2;
-  padding-top: $s-2;
+  margin-left: $s-8;
+  padding-top: $s-12;
   color: var(--layer-row-foreground-color);
 }
 
@@ -51,12 +51,6 @@
   overflow-y: auto;
 }
 
-.divider {
-  height: 1px;
-  background-color: var(--border-color);
-  margin: $s-8 0;
-}
-
 .token-pills-wrapper {
   display: flex;
   gap: $s-4;

From b3e939d12a42f853ad0a8a002965443c1e9cc1e0 Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 21:30:59 +0530
Subject: [PATCH 31/33] add a hardcoded flag to display/hide token sets section

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 570df9077..380d37c12 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -192,12 +192,14 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [_props]
+  (let [show-sets-section? false] ;; temporarily added this variable to see/hide the sets section till we have it working end to end
   [:div {:class (stl/css :sidebar-tab-wrapper)}
+  (when show-sets-section?
    [:div {:class (stl/css :sets-section-wrapper)}
-    [:& sets-sidebar]]
+    [:& sets-sidebar]])
    [: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
-    "Export JSON"]])
+    "Export JSON"]]))

From 2487f34b721a2a269d23ac910a58f35f009f3aef Mon Sep 17 00:00:00 2001
From: Akshay Gupta <gravity.akshay@gmail.com>
Date: Tue, 20 Aug 2024 21:34:07 +0530
Subject: [PATCH 32/33] formatting

---
 .../app/main/ui/workspace/tokens/sets.cljs    | 12 +++++------
 .../app/main/ui/workspace/tokens/sidebar.cljs | 20 +++++++++----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index 6a882ea13..01a2c212e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -90,12 +90,12 @@
          (when (and children (not @collapsed?))
            [:div {:class (stl/css :set-children)}
             (for [child-id children]
-                [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])]))))
+              [:& sets-tree {:key child-id :set-id child-id :selected-set-id selected-set-id}])])]))))
 
 (mf/defc sets-list
   [{:keys [selected-set-id]}]
-    [:ul {:class (stl/css :sets-list)}
-     (for [set-id sets-root-order]
-	       [:& sets-tree {:key set-id
-	                      :set-id set-id
-	                      :selected-set-id selected-set-id}])])
+  [:ul {:class (stl/css :sets-list)}
+   (for [set-id sets-root-order]
+     [:& sets-tree {:key set-id
+                    :set-id set-id
+                    :selected-set-id selected-set-id}])])
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 380d37c12..7729f41df 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -193,13 +193,13 @@
    ::mf/wrap-props false}
   [_props]
   (let [show-sets-section? false] ;; temporarily added this variable to see/hide the sets section till we have it working end to end
-  [:div {:class (stl/css :sidebar-tab-wrapper)}
-  (when show-sets-section?
-   [:div {:class (stl/css :sets-section-wrapper)}
-    [:& sets-sidebar]])
-   [: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
-    "Export JSON"]]))
+    [:div {:class (stl/css :sidebar-tab-wrapper)}
+     (when show-sets-section?
+       [:div {:class (stl/css :sets-section-wrapper)}
+        [:& sets-sidebar]])
+     [: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
+      "Export JSON"]]))

From f9704fe7aaa74f082d0466c65dd7a9247bc45197 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Tue, 20 Aug 2024 18:40:02 +0200
Subject: [PATCH 33/33] Fix padding without sets

---
 frontend/src/app/main/ui/workspace/tokens/sidebar.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
index 4ef8ff21c..e90b12d3c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.scss
@@ -48,9 +48,16 @@
 
 .tokens-section-wrapper {
   flex: 1;
+  padding-top: $s-12;
+  padding-left: $s-12;
   overflow-y: auto;
 }
 
+// TODO Remove once sets are available to public
+.sets-section-wrapper + .tokens-section-wrapper {
+  padding-top: 0;
+}
+
 .token-pills-wrapper {
   display: flex;
   gap: $s-4;