From 8119ed132eccd6406efc5e7c47081854c22733a6 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 21 May 2026 17:15:07 +0200 Subject: [PATCH] :bug: Fix sorting of standalone and grouped tokens (#9736) --- .../tokens/management/token_tree.cljs | 126 +++++++++++------- 1 file changed, 76 insertions(+), 50 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs index b27db0bc85..798485cc87 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/token_tree.cljs @@ -11,8 +11,8 @@ [app.common.path-names :as cpn] [app.common.types.tokens-lib :as ctob] [app.main.data.workspace.tokens.library-edit :as dwtl] - [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.context :as ctx] [app.main.ui.ds.layers.layer-button :refer [layer-button*]] [app.main.ui.workspace.tokens.management.token-pill :refer [token-pill*]] [rumext.v2 :as mf])) @@ -44,18 +44,36 @@ on-token-pill-click on-pill-context-menu on-node-context-menu]}] - (let [full-path (str (name type) "." (:path node)) - is-folder-expanded (not (contains? (set (or folded-token-paths [])) full-path)) - swap-folder-expanded (mf/use-fn - (mf/deps full-path) - (fn [] - (st/emit! (dwtl/toggle-token-path full-path)))) + (let [full-path (str (name type) "." (:path node)) + is-folder-expanded (not (contains? (set (or folded-token-paths [])) full-path)) + children (:children node) + + sorted-children + (mf/with-memo [children] + (let [[leafs groups] + (reduce (fn [[l g] item] + (if (:leaf item) + [(conj l item) g] + [l (conj g item)])) + [[] []] + children) + sorted-leafs (d/natural-sort-by :name leafs) + sorted-groups (d/natural-sort-by :name groups)] + (concat sorted-leafs sorted-groups))) + + swap-folder-expanded + (mf/use-fn + (mf/deps full-path) + (fn [] + (st/emit! (dwtl/toggle-token-path full-path)))) + + node-context-menu-prep + (mf/use-fn + (mf/deps on-node-context-menu node) + (fn [event] + (when on-node-context-menu + (on-node-context-menu event node))))] - node-context-menu-prep (mf/use-fn - (mf/deps on-node-context-menu node) - (fn [event] - (when on-node-context-menu - (on-node-context-menu event node))))] [:li {:class (stl/css :folder-node)} [:> layer-button* {:label (:name node) :expanded is-folder-expanded @@ -65,36 +83,34 @@ :on-toggle-expand swap-folder-expanded :on-context-menu node-context-menu-prep}] (when is-folder-expanded - (let [children (:children node)] - [:div {:class (stl/css :folder-children-wrapper) - :id (str "folder-children-" (:path node))} - (when (seq children) - (let [sorted-children (d/natural-sort-by :name children)] - (for [child sorted-children] - (if (not (:leaf child)) - [:ul {:class (stl/css :node-parent) - :key (:path child)} - [:> folder-node* {:type type - :node child - :folded-token-paths folded-token-paths - :selected-shapes selected-shapes - :is-selected-inside-layout is-selected-inside-layout - :active-theme-tokens active-theme-tokens - :on-token-pill-click on-token-pill-click - :on-pill-context-menu on-pill-context-menu - :on-node-context-menu on-node-context-menu - :tokens-lib tokens-lib - :selected-token-set-id selected-token-set-id}]] - (let [id (:id (:leaf child)) - token (ctob/get-token tokens-lib selected-token-set-id id)] - [:> token-pill* - {:key id - :token token - :selected-shapes selected-shapes - :is-selected-inside-layout is-selected-inside-layout - :active-theme-tokens active-theme-tokens - :on-click on-token-pill-click - :on-context-menu on-pill-context-menu}])))))]))])) + [:div {:class (stl/css :folder-children-wrapper) + :id (str "folder-children-" (:path node))} + (when (seq children) + (for [child sorted-children] + (if (not (:leaf child)) + [:ul {:class (stl/css :node-parent) + :key (:path child)} + [:> folder-node* {:type type + :node child + :folded-token-paths folded-token-paths + :selected-shapes selected-shapes + :is-selected-inside-layout is-selected-inside-layout + :active-theme-tokens active-theme-tokens + :on-token-pill-click on-token-pill-click + :on-pill-context-menu on-pill-context-menu + :on-node-context-menu on-node-context-menu + :tokens-lib tokens-lib + :selected-token-set-id selected-token-set-id}]] + (let [id (:id (:leaf child)) + token (ctob/get-token tokens-lib selected-token-set-id id)] + [:> token-pill* + {:key id + :token token + :selected-shapes selected-shapes + :is-selected-inside-layout is-selected-inside-layout + :active-theme-tokens active-theme-tokens + :on-click on-token-pill-click + :on-context-menu on-pill-context-menu}]))))])])) (def ^:private schema:token-tree [:map @@ -124,19 +140,29 @@ on-pill-context-menu on-node-context-menu]}] (let [separator "." - tree (mf/use-memo - (mf/deps tokens) - (fn [] - (->> (cpn/build-tree-root tokens separator) - (d/natural-sort-by :name)))) - can-edit? (:can-edit (deref refs/permissions)) + raw-tree (mf/with-memo [tokens] + (cpn/build-tree-root tokens separator)) + permissions (mf/use-ctx ctx/permissions) + can-edit? (:can-edit permissions) on-node-context-menu (mf/use-fn (mf/deps can-edit? on-node-context-menu) (fn [event node] (when can-edit? - (on-node-context-menu event node))))] + (on-node-context-menu event node)))) + + ordered-nodes (mf/with-memo [raw-tree] + (let [[leafs groups] + (reduce (fn [[l g] item] + (if (:leaf item) + [(conj l item) g] + [l (conj g item)])) + [[] []] + raw-tree) + sorted-leafs (d/natural-sort-by :name leafs) + sorted-groups (d/natural-sort-by :name groups)] + (concat sorted-leafs sorted-groups)))] [:div {:class (stl/css :token-tree-wrapper)} - (for [node tree] + (for [node ordered-nodes] (if (:leaf node) (let [token (ctob/get-token tokens-lib selected-token-set-id (get-in node [:leaf :id]))] [:> token-pill*