diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index c5de2cd79..c884885da 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -453,9 +453,13 @@ (def workspace-token-themes-no-hidden (l/derived #(remove ctob/hidden-temporary-theme? %) workspace-token-themes)) +;; FIXME: deprecated (def workspace-selected-token-set-name (l/derived dwts/get-selected-token-set-name st/state)) +(def selected-token-set-name + (l/derived (l/key :selected-token-set-name) workspace-local)) + (def workspace-ordered-token-sets (l/derived #(or (some-> % ctob/get-sets) []) tokens-lib)) diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 43b0065b8..57588d202 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -445,23 +445,32 @@ :on-edit-submit-set on-update-token-set :on-edit-submit-group on-update-token-set-group}])])) +(mf/defc sets-list* + [{:keys [tokens-lib selected-token-set-name]}] + + (let [token-sets + (ctob/get-set-tree tokens-lib) + + token-set-selected? + (mf/use-fn + (mf/deps token-sets selected-token-set-name) + (fn [set-name] + (= set-name selected-token-set-name))) + + active-token-set-names + (mf/deref refs/workspace-active-set-names) + + token-set-active? + (mf/use-fn + (mf/deps active-token-set-names) + (fn [set-name] + (get active-token-set-names set-name))) + + token-set-group-active? + (mf/use-fn + (fn [group-path] + @(refs/token-sets-at-path-all-active group-path)))] -(mf/defc sets-list - [{:keys []}] - (let [token-sets (mf/deref refs/workspace-token-sets-tree) - selected-token-set-name (mf/deref refs/workspace-selected-token-set-name) - token-set-selected? (mf/use-fn - (mf/deps token-sets selected-token-set-name) - (fn [set-name] - (= set-name selected-token-set-name))) - active-token-set-names (mf/deref refs/workspace-active-set-names) - token-set-active? (mf/use-fn - (mf/deps active-token-set-names) - (fn [set-name] - (get active-token-set-names set-name))) - token-set-group-active? (mf/use-fn - (fn [group-path] - @(refs/token-sets-at-path-all-active group-path)))] [:& controlled-sets-list {:token-sets token-sets :token-set-selected? token-set-selected? diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 54397f0d9..2f7c594bc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -29,7 +29,7 @@ [app.main.ui.workspace.tokens.changes :as wtch] [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.errors :as wte] - [app.main.ui.workspace.tokens.sets :refer [sets-list]] + [app.main.ui.workspace.tokens.sets :refer [sets-list*]] [app.main.ui.workspace.tokens.sets-context :as sets-context] [app.main.ui.workspace.tokens.sets-context-menu :refer [sets-context-menu]] [app.main.ui.workspace.tokens.style-dictionary :as sd] @@ -239,18 +239,31 @@ (mf/defc theme-sets-list* {::mf/private true} - [] - (let [token-sets (mf/deref refs/workspace-ordered-token-sets) - {:keys [new-path] :as ctx} (sets-context/use-context)] + [{:keys [tokens-lib]}] + (let [token-sets + (ctob/get-sets tokens-lib) + + selected-token-set-name + (mf/deref refs/selected-token-set-name) + + selected-token-set-name + (if selected-token-set-name + selected-token-set-name + (-> token-sets first :name)) + + {:keys [new-path] :as ctx} + (sets-context/use-context)] + (if (and (empty? token-sets) (not new-path)) [:> add-set-button* {:style "inline"}] [:& h/sortable-container {} - [:& sets-list]]))) + [:> sets-list* {:tokens-lib tokens-lib + :selected-token-set-name selected-token-set-name}]]))) (mf/defc themes-sets-tab* {::mf/private true} - [{:keys [resize-height]}] + [{:keys [resize-height] :as props}] (let [permissions (mf/use-ctx ctx/permissions) @@ -269,7 +282,7 @@ (when can-edit? [:> add-set-button* {:style "header"}])]] - [:> theme-sets-list* {}]]]])) + [:> theme-sets-list* props]]]])) (mf/defc tokens-tab* [] @@ -406,14 +419,19 @@ on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages-opened :size} - (use-resize-hook :tokens 200 38 "0.6" :y false nil)] + (use-resize-hook :tokens 200 38 400 :y false nil) + + tokens-lib + (mf/deref refs/tokens-lib)] + [:div {:class (stl/css :sidebar-wrapper)} - [:> themes-sets-tab* {:resize-height size-pages-opened}] + [:> themes-sets-tab* {:resize-height size-pages-opened + :tokens-lib tokens-lib}] [:article {:class (stl/css :tokens-section-wrapper) :data-testid "tokens-sidebar"} [:div {:class (stl/css :resize-area-horiz) :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* {:tokens-lib tokens-lib}]] [:& import-export-button]]))