Allow toggling individual set themes

frontend/src/app/main/data/tokens.cljs

@@ -157,11 +157,12 @@
           (rx/of
            (dch/commit-changes changes)))))))
 
-(defn toggle-token-set [token-set-id]
+(defn toggle-token-set [{:keys [token-set-id token-theme-id]}]
   (ptk/reify ::toggle-token-set
     ptk/WatchEvent
     (watch [it state _]
-      (let [theme (some-> (wtts/update-theme-id state)
+      (js/console.log "token-set-id token-theme-id" token-set-id token-theme-id)
+      (let [theme (some-> (or token-theme-id (wtts/update-theme-id state))
                           (wtts/get-workspace-token-theme state))
             changes (-> (pcb/empty-changes it)
                         (pcb/update-token-theme

frontend/src/app/main/refs.cljs

@@ -240,6 +240,10 @@
    st/state
    =))
 
+(defn workspace-token-theme
+  [id]
+  (l/derived #(wtts/get-workspace-theme id %) st/state))
+
 (def workspace-active-theme-ids
   (l/derived wtts/get-active-theme-ids st/state))
 

frontend/src/app/main/ui.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui
   (:require
+   [app.main.ui.workspace.tokens.modals.themes :as wtmt]
    [app.config :as cf]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -191,6 +192,7 @@
 
     [:& (mf/provider ctx/current-route) {:value route}
      [:& (mf/provider ctx/current-profile) {:value profile}
+      [:& wtmt/modal]
       (if edata
         [:& static/exception-page {:data edata :route route}]
         [:*

frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs

@@ -52,7 +52,7 @@
                         (dom/prevent-default e)
                         (dom/stop-propagation e)
                         (set-state (fn [_] {:type :edit-theme
-                                            :theme theme})))]
+                                            :theme-id (:id theme)})))]
     [:div
      [:ul {:class (stl/css :theme-group-wrapper)}
       (for [[group themes] themes]
@@ -96,27 +96,25 @@
 
 (mf/defc edit-theme
   [{:keys [state]}]
-  (let [{:keys [theme]} @state
+  (let [{:keys [theme-id]} @state
         token-sets (mf/deref refs/workspace-token-sets)
-        selected-token-set-id (mf/deref refs/workspace-selected-token-set-id)
+        theme (mf/deref (refs/workspace-token-theme theme-id))
-        token-set-selected? (mf/use-callback
-                             (mf/deps selected-token-set-id)
-                             (fn [id]
-                               (= id selected-token-set-id)))
-        active-token-set-ids (mf/deref refs/workspace-active-set-ids)
         token-set-active? (mf/use-callback
-                           (mf/deps active-token-set-ids)
+                           (mf/deps (:sets theme))
                            (fn [id]
-                             (get active-token-set-ids id)))]
+                             (get-in theme [:sets id])))
+        on-toggle-token-set (mf/use-callback
+                             (mf/deps (:id theme))
+                             (fn [token-set-id]
+                               (st/emit! (wdt/toggle-token-set {:token-set-id token-set-id
+                                                                :token-theme-id (:id theme)}))))]
     [:div {:class (stl/css :sets-list-wrapper)}
      [:& wts/controlled-sets-list
       {:token-sets token-sets
        :token-set-selected? (constantly false)
        :token-set-active? token-set-active?
-       :on-select (fn [id]
+       :on-select on-toggle-token-set
-                    (js/console.log "id" id))
+       :on-toggle on-toggle-token-set}]]))
-       :on-toggle (fn [id]
-                    (js/console.log "id" id))}]]))
 
 (mf/defc themes
   [{:keys [] :as _args}]

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -17,8 +17,8 @@
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
-(defn on-toggle-token-set-click [id]
+(defn on-toggle-token-set-click [token-set-id]
-  (st/emit! (wdt/toggle-token-set id)))
+  (st/emit! (wdt/toggle-token-set {:token-set-id token-set-id})))
 
 (defn on-select-token-set-click [id]
   (st/emit! (wdt/set-selected-token-set-id id)))

frontend/src/app/main/ui/workspace/tokens/token_set.cljs

@@ -12,6 +12,9 @@
 (defn get-workspace-themes [state]
   (get-in state [:workspace-data :token-themes] []))
 
+(defn get-workspace-theme [id state]
+  (get-in state [:workspace-data :token-themes-index id]))
+
 (defn get-workspace-themes-index [state]
   (get-in state [:workspace-data :token-themes-index] {}))