From b6e26d15e1da6a1f717ce5e6fe85107d29a80ea9 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Tue, 4 Feb 2025 18:03:37 +0100
Subject: [PATCH] :lipstick: Add cosmetic changes to tokens sidebar component

---
 .../src/app/main/ui/workspace/sidebar.cljs    |  4 +-
 .../app/main/ui/workspace/tokens/sidebar.cljs | 40 +++++++++++--------
 .../ui/workspace/tokens/style_dictionary.cljs |  4 +-
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index f28f04ac2..5b2222f44 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -31,7 +31,7 @@
    [app.main.ui.workspace.sidebar.shortcuts :refer [shortcuts-container]]
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
    [app.main.ui.workspace.sidebar.versions :refer [versions-toolbox*]]
-   [app.main.ui.workspace.tokens.sidebar :refer [tokens-sidebar-tab]]
+   [app.main.ui.workspace.tokens.sidebar :refer [tokens-sidebar-tab*]]
    [app.util.debug :as dbg]
    [app.util.i18n :refer [tr]]
    [potok.v2.core :as ptk]
@@ -120,7 +120,7 @@
 
         tokens-tab
         (when design-tokens?
-          (mf/html [:& tokens-sidebar-tab]))
+          (mf/html [:> tokens-sidebar-tab*]))
 
         tabs
         (if ^boolean mode-inspect?
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 86e6157b9..4f8fd62a4 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -254,24 +254,31 @@
                                :style "header"}])]]
        [:& theme-sets-list {:on-open on-open}]]]]))
 
-(mf/defc tokens-tab
-  [_props]
-  (let [objects (mf/deref refs/workspace-page-objects)
+(mf/defc tokens-tab*
+  []
+  (let [objects         (mf/deref refs/workspace-page-objects)
+        selected        (mf/deref refs/selected-shapes)
 
-        selected (mf/deref refs/selected-shapes)
-        selected-shapes (into [] (keep (d/getf objects)) selected)
+        selected-shapes
+        (mf/with-memo [selected objects]
+          (into [] (keep (d/getf objects)) selected))
 
-        active-theme-tokens (sd/use-active-theme-sets-tokens)
+        active-theme-tokens
+        (sd/use-active-theme-tokens)
 
-        tokens (sd/use-resolved-workspace-tokens)
+        tokens
+        (sd/use-resolved-workspace-tokens)
 
-        selected-token-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
+        selected-token-set-tokens
+        (mf/deref refs/workspace-selected-token-set-tokens)
 
-        selected-token-set-name (mf/deref refs/workspace-selected-token-set-name)
+        selected-token-set-name
+        (mf/deref refs/workspace-selected-token-set-name)
 
-        token-groups (mf/with-memo [tokens selected-token-set-tokens]
-                       (-> (select-keys tokens (keys selected-token-set-tokens))
-                           (sorted-token-groups)))]
+        token-groups
+        (mf/with-memo [tokens selected-token-set-tokens]
+          (-> (select-keys tokens (keys selected-token-set-tokens))
+              (sorted-token-groups)))]
     [:*
      [:& token-context-menu]
      [:& title-bar {:all-clickable true
@@ -357,10 +364,9 @@
                                :on-click on-export}
        (tr "labels.export")]]]))
 
-(mf/defc tokens-sidebar-tab
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
-  [_props]
+(mf/defc tokens-sidebar-tab*
+  {::mf/wrap [mf/memo]}
+  []
   (let [{on-pointer-down-pages :on-pointer-down
          on-lost-pointer-capture-pages :on-lost-pointer-capture
          on-pointer-move-pages :on-pointer-move
@@ -374,5 +380,5 @@
              :on-pointer-down on-pointer-down-pages
              :on-lost-pointer-capture on-lost-pointer-capture-pages
              :on-pointer-move on-pointer-move-pages}]
-      [:& tokens-tab]]
+      [:> tokens-tab*]]
      [:& import-export-button]]))
diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
index 2a1618e19..28d72e34e 100644
--- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs
@@ -295,6 +295,8 @@
         prefer-selected-token-set-tokens (merge active-theme-tokens selected-token-set-tokens)]
     (use-resolved-tokens prefer-selected-token-set-tokens)))
 
-(defn use-active-theme-sets-tokens []
+(defn use-active-theme-tokens
+  "A hook that returns active tokens for the current active theme"
+  []
   (-> (mf/deref refs/workspace-active-theme-sets-tokens)
       (use-resolved-tokens {:cache-atom !theme-tokens-cache})))