From 97f119f3da0e1c11e697203b39d0063d29055cbb Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Fri, 23 Aug 2024 11:32:54 +0200
Subject: [PATCH] Add delete set action button

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

diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
index f0a27792b6..852844bf51 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs
@@ -18,15 +18,16 @@
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
 (defn on-toggle-token-set-click [id event]
-  (dom/prevent-default event)
   (dom/stop-propagation event)
   (st/emit! (wdt/toggle-token-set id)))
 
 (defn on-select-token-set-click [id event]
-  (dom/prevent-default event)
-  (dom/stop-propagation event)
   (st/emit! (wdt/set-selected-token-set-id id)))
 
+(defn on-delete-token-set-click [id event]
+  (dom/stop-propagation event)
+  (st/emit! (wdt/delete-token-set id)))
+
 (mf/defc sets-tree
   [{:keys [token-set token-set-active? token-set-selected?] :as _props}]
   (let [{:keys [id name _children]} token-set
@@ -34,7 +35,7 @@
         visible? (token-set-active? id)
         collapsed? (mf/use-state false)
         set? true #_(= type :set)
-        group? false #_ (= type :group)]
+        group? false #_(= type :group)]
     [:div {:class (stl/css :set-item-container)
            :on-click #(on-select-token-set-click id %)}
      [:div {:class (stl/css-case :set-item-group group?
@@ -48,6 +49,9 @@
       [:span {:class (stl/css :icon)}
        (if set? i/document i/group)]
       [:div {:class (stl/css :set-name)} name]
+      [:div {:class (stl/css :delete-set)}
+       [:button {:on-click #(on-delete-token-set-click id %)}
+        i/delete]]
       (when set?
         [:span {:class (stl/css :action-btn)
                 :on-click #(on-toggle-token-set-click id %)}
diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.scss b/frontend/src/app/main/ui/workspace/tokens/sets.scss
index 5c32bf199b..d4b21746ae 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sets.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/sets.scss
@@ -56,6 +56,10 @@
     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);
+
+    .delete-set {
+      visibility: visible;
+    }
   }
 }
 
@@ -65,6 +69,27 @@
   box-shadow: -100px 0 0 0 var(--layer-row-background-color-selected);
 }
 
+.delete-set {
+  @extend .button-tertiary;
+  height: $s-28;
+  width: $s-28;
+  visibility: hidden;
+  button {
+    @include buttonStyle;
+    @include flexCenter;
+    width: $s-24;
+    height: 100%;
+    svg {
+      @extend .button-icon-small;
+      height: $s-12;
+      width: $s-12;
+      color: transparent;
+      fill: none;
+      stroke: var(--icon-foreground);
+    }
+  }
+}
+
 .action-btn {
   @extend .button-tertiary;
   height: $s-28;