diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index f4baf096bb..605bae80d6 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -179,47 +179,56 @@ :name @name}))} "Create"]])) -(mf/defc token-sets +(mf/defc themes-sidebar [_props] - (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids) + (let [open? (mf/use-state true) + active-theme-ids (mf/deref refs/workspace-active-theme-ids) themes (mf/deref refs/workspace-ordered-token-themes)] - [:div - [:style - (str "@scope {" - (str/join "\n" - ["ul { list-style-type: circle; margin-left: 20px; }" - ".spaced { display: flex; gap: 10px; justify-content: space-between; }" - ".spaced-y { display: flex; flex-direction: column; gap: 10px }" - ".selected { font-weight: 600; }" - "b { font-weight: 600; }"]) - "}")] - [:div.spaced-y - {:style {:padding "10px"}} - [:& tokene-theme-create] - [:div.spaced-y - [:b "Themes"] - [:ul - (for [[group themes] themes] - [:li - {:key (str "token-theme-group" group)} - group - [:ul - (for [{:keys [id name] :as _theme} themes] - [:li {:key (str "tokene-theme-" id)} - [:div.spaced - name - [:div.spaced - [:button - {:on-click (fn [e] - (dom/prevent-default e) - (dom/stop-propagation e) - (st/emit! (wdt/toggle-token-theme id)))} - (if (get active-theme-ids id) "✅" "❎")] - [:button {:on-click (fn [e] - (dom/prevent-default e) - (dom/stop-propagation e) - (st/emit! (wdt/delete-token-theme id)))} - "🗑️"]]]])]])]]]])) + [:div {:class (stl/css :sets-sidebar)} + [:div {:class (stl/css :sidebar-header)} + [:& title-bar {:collapsable true + :collapsed (not @open?) + :all-clickable true + :title "THEMES" + :on-collapsed #(swap! open? not)}]] + (when @open? + [:div + [:style + (str "@scope {" + (str/join "\n" + ["ul { list-style-type: circle; margin-left: 20px; }" + ".spaced { display: flex; gap: 10px; justify-content: space-between; }" + ".spaced-y { display: flex; flex-direction: column; gap: 10px }" + ".selected { font-weight: 600; }" + "b { font-weight: 600; }"]) + "}")] + [:div.spaced-y + {:style {:padding "10px"}} + [:& tokene-theme-create] + [:div.spaced-y + [:b "Themes"] + [:ul + (for [[group themes] themes] + [:li + {:key (str "token-theme-group" group)} + group + [:ul + (for [{:keys [id name] :as _theme} themes] + [:li {:key (str "tokene-theme-" id)} + [:div.spaced + name + [:div.spaced + [:button + {:on-click (fn [e] + (dom/prevent-default e) + (dom/stop-propagation e) + (st/emit! (wdt/toggle-token-theme id)))} + (if (get active-theme-ids id) "✅" "❎")] + [:button {:on-click (fn [e] + (dom/prevent-default e) + (dom/stop-propagation e) + (st/emit! (wdt/delete-token-theme id)))} + "🗑️"]]]])]])]]]])])) (mf/defc sets-sidebar [] @@ -292,8 +301,8 @@ [:div {:class (stl/css :sidebar-tab-wrapper)} (when show-sets-section? [:div {:class (stl/css :sets-section-wrapper)} - [:& sets-sidebar] - [:& token-sets]]) + [:& themes-sidebar] + [:& sets-sidebar]]) [:div {:class (stl/css :tokens-section-wrapper)} [:& tokens-explorer]] [:button {:class (stl/css :download-json-button)