From 8b569005e1de544d422d80fffceefd345b09e8bf Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Wed, 4 Dec 2024 17:16:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Display=20active=20state=20of=20chi?=
 =?UTF-8?q?ldren=20checkmark=20next=20to=20set=20groups=20in=20themes=20mo?=
 =?UTF-8?q?dal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/workspace/tokens/modals/themes.cljs    | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
index 476156b61..f964533ef 100644
--- a/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
@@ -254,28 +254,22 @@
   [{:keys [state set-state]}]
   (let [{:keys [theme-path]} @state
         [_ theme-group theme-name] theme-path
+        ordered-token-sets (mf/deref refs/workspace-ordered-token-sets)
         token-sets (mf/deref refs/workspace-token-sets-tree)
         theme (mf/deref (refs/workspace-token-theme theme-group theme-name))
+        theme-state (mf/use-state theme)
+        lib (-> (ctob/make-tokens-lib)
+                (ctob/add-theme @theme-state)
+                (ctob/add-sets ordered-token-sets)
+                (ctob/activate-theme (:group @theme-state) (:name @theme-state)))
+
+        ;; Form / Modal handlers
         on-back #(set-state (constantly {:type :themes-overview}))
         on-submit #(st/emit! (wdt/update-token-theme [(:group theme) (:name theme)] %))
         {:keys [dropdown-open? _on-open-dropdown on-close-dropdown on-toggle-dropdown]} (wtco/use-dropdown-open-state)
-        theme-state (mf/use-state theme)
         disabled? (-> (:name @theme-state)
                       (str/trim)
                       (str/empty?))
-        token-set-active? (mf/use-callback
-                           (mf/deps theme-state)
-                           (fn [set-name]
-                             (get-in @theme-state [:sets set-name])))
-        on-toggle-token-set (mf/use-callback
-                             (mf/deps theme-state)
-                             (fn [set-name]
-                               (swap! theme-state #(ctob/toggle-set % set-name))))
-        on-click-token-set (mf/use-callback
-                            (mf/deps on-toggle-token-set)
-                            (fn [prefixed-set-path-str]
-                              (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
-                                (on-toggle-token-set set-name))))
         on-change-field (fn [field value]
                           (swap! theme-state #(assoc % field value)))
         on-save-form (mf/use-callback
@@ -294,13 +288,31 @@
          (fn [e]
            (dom/prevent-default e)
            (st/emit! (modal/hide))))
-
         on-delete-token
         (mf/use-fn
          (mf/deps theme on-back)
          (fn []
            (st/emit! (wdt/delete-token-theme (:group theme) (:name theme)))
-           (on-back)))]
+           (on-back)))
+
+        ;; Sets tree handlers
+        token-set-group-active? (mf/use-callback
+                                 (mf/deps theme-state)
+                                 (fn [prefixed-path]
+                                   (ctob/sets-at-path-all-active? lib prefixed-path)))
+        token-set-active? (mf/use-callback
+                           (mf/deps theme-state)
+                           (fn [set-name]
+                             (get-in @theme-state [:sets set-name])))
+        on-toggle-token-set (mf/use-callback
+                             (mf/deps theme-state)
+                             (fn [set-name]
+                               (swap! theme-state #(ctob/toggle-set % set-name))))
+        on-click-token-set (mf/use-callback
+                            (mf/deps on-toggle-token-set)
+                            (fn [prefixed-set-path-str]
+                              (let [set-name (ctob/prefixed-set-path-string->set-name-string prefixed-set-path-str)]
+                                (on-toggle-token-set set-name))))]
 
     [:div {:class (stl/css :themes-modal-wrapper)}
      [:> heading* {:level 2 :typography "headline-medium" :class (stl/css :themes-modal-title)}
@@ -327,6 +339,7 @@
          {:token-sets token-sets
           :token-set-selected? (constantly false)
           :token-set-active? token-set-active?
+          :token-set-group-active? token-set-group-active?
           :on-select on-click-token-set
           :on-toggle-token-set on-toggle-token-set
           :origin "theme-modal"