Use theme listing

frontend/src/app/main/refs.cljs

@@ -12,11 +12,11 @@
    [app.common.files.helpers :as cph]
    [app.common.types.shape-tree :as ctt]
    [app.common.types.shape.layout :as ctl]
+   [app.common.types.tokens-lib :as ctob]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.store :as st]
    [app.main.ui.workspace.tokens.token-set :as wtts]
-   [okulary.core :as l]
-   [app.common.types.tokens-lib :as ctob]))
+   [okulary.core :as l]))
 
 ;; ---- Global refs
 
@@ -257,42 +257,57 @@
        (ctob/get-theme lib group name)))
    tokens-lib))
 
-;; Old
-
-(def workspace-active-theme-ids
-  (l/derived wtts/get-active-theme-ids st/state))
-
-(def workspace-temp-theme-id
-  (l/derived wtts/get-temp-theme-id st/state))
-
-(def workspace-active-set-ids
-  (l/derived wtts/get-active-set-ids st/state))
+(def workspace-token-theme-tree
+  (l/derived #(or (some-> % ctob/get-theme-tree) []) tokens-lib))
 
 (def workspace-token-themes
-  (l/derived wtts/get-workspace-themes-index st/state))
+  (l/derived #(or (some-> % ctob/get-themes) []) tokens-lib))
 
-(def workspace-ordered-token-themes
-  (l/derived wtts/get-workspace-ordered-themes st/state))
+(comment
+  @workspace-token-theme-tree
+  @workspace-token-themes-OLD
+  nil)
 
-(def workspace-ordered-token-sets
-  (l/derived
-   (fn [data]
-     (or (wtts/get-workspace-ordered-sets data) {}))
-   st/state
-   =))
 
-(def workspace-active-theme-sets-tokens
-  (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
 
-(def workspace-ordered-token-sets-tokens
-  (l/derived wtts/get-workspace-ordered-sets-tokens st/state =))
+;; Old
 
-(def workspace-selected-token-set-tokens
-  (l/derived
-   (fn [data]
-     (or (wtts/get-selected-token-set-tokens data) {}))
-   st/state
-   =))
+(dm/legacy
+
+ (def workspace-active-theme-ids
+   (l/derived wtts/get-active-theme-ids st/state))
+
+ (def workspace-temp-theme-id
+   (l/derived wtts/get-temp-theme-id st/state))
+
+ (def workspace-active-set-ids
+   (l/derived wtts/get-active-set-ids st/state))
+
+ (def workspace-token-themes-OLD
+   (l/derived wtts/get-workspace-themes-index st/state))
+
+ (def workspace-ordered-token-themes-OLD
+   (l/derived wtts/get-workspace-ordered-themes st/state))
+
+ (def workspace-ordered-token-sets
+   (l/derived
+    (fn [data]
+      (or (wtts/get-workspace-ordered-sets data) {}))
+    st/state
+    =))
+
+ (def workspace-active-theme-sets-tokens
+   (l/derived wtts/get-active-theme-sets-tokens-names-map st/state =))
+
+ (def workspace-ordered-token-sets-tokens
+   (l/derived wtts/get-workspace-ordered-sets-tokens st/state =))
+
+ (def workspace-selected-token-set-tokens
+   (l/derived
+    (fn [data]
+      (or (wtts/get-selected-token-set-tokens data) {}))
+    st/state
+    =)))
 
 (def workspace-file-colors
   (l/derived (fn [data]

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

@@ -56,21 +56,20 @@
 (mf/defc themes-overview
   [{:keys [set-state]}]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
-        themes (mf/deref refs/workspace-ordered-token-themes)
+        themes-groups (mf/deref refs/workspace-token-theme-tree)
         on-edit-theme (fn [theme e]
                         (dom/prevent-default e)
                         (dom/stop-propagation e)
                         (set-state (fn [_] {:type :edit-theme
-                                            :theme-id (:id theme)
                                             :theme-path [(:id theme) (:group theme) (:name theme)]})))]
     [:div
      [:ul {:class (stl/css :theme-group-wrapper)}
-      (for [[group themes] themes]
+      (for [[group themes] themes-groups]
         [:li {:key (str "token-theme-group" group)}
          (when (seq group)
            [:span {:class (stl/css :theme-group-label)} group])
          [:ul {:class (stl/css :theme-group-rows-wrapper)}
-          (for [{:keys [id name] :as theme} themes
+          (for [[_ {:keys [id name] :as theme}] themes
                 :let [selected? (some? (get active-theme-ids id))]]
             [:li {:key (str "token-theme-" id)
                   :class (stl/css :theme-row)}
@@ -239,8 +238,8 @@
       :on-submit #(st/emit! (wdt/create-token-theme %))}]))
 
 (mf/defc themes
-  [{:keys [] :as _args}]
-  (let [themes (mf/deref refs/workspace-ordered-token-themes)
+  [_]
+  (let [themes (mf/deref refs/workspace-token-themes)
         state (mf/use-state (if (empty? themes)
                               {:type :create-theme}
                               {:type :themes-overview}))
@@ -261,7 +260,7 @@
 
 (mf/defc modal
   {::mf/wrap-props false}
-  [{:keys [] :as _args}]
+  [_]
   (let [handle-close-dialog (mf/use-callback #(st/emit! (modal/hide)))]
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog)}

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

@@ -200,7 +200,7 @@
 
 (mf/defc themes-sidebar
   [_props]
-  (let [ordered-themes (mf/deref refs/workspace-ordered-token-themes)]
+  (let [ordered-themes (mf/deref refs/workspace-ordered-token-themes-OLD)]
    [:div {:class (stl/css :theme-sidebar)}
     [:span {:class (stl/css :themes-header)} "Themes"]
     [:div {:class (stl/css :theme-select-wrapper)}

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

@@ -38,7 +38,7 @@
 (mf/defc theme-options
   [{:keys [on-close]}]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
-        ordered-themes (mf/deref refs/workspace-ordered-token-themes)
+        ordered-themes (mf/deref refs/workspace-ordered-token-themes-OLD)
         grouped-themes (dissoc ordered-themes nil)
         ungrouped-themes (get ordered-themes nil)]
     [:ul
@@ -66,7 +66,7 @@
         active-theme-ids (-> (mf/deref refs/workspace-active-theme-ids)
                              (disj temp-theme-id))
         active-themes-count (count active-theme-ids)
-        themes (mf/deref refs/workspace-token-themes)
+        themes (mf/deref refs/workspace-token-themes-OLD)
 
         ;; Data
         current-label (cond