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] 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;
   }