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