add current set and selected set

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]}]
+  [{:keys [current-set-id set-id toggle-visibility]}]
-  ;;(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 i/document
             visible? (mf/use-state (contains? active-sets set-id))
-            collapsed? (mf/use-state false)]
+            collapsed? (mf/use-state false)
-        [:div {:class (stl/css :set-item-container)}
+            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 [current-set-id (:current-set-id @st/state)
-  (let [open? (mf/use-state true)]
+        ;;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}])]))

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;