✨ Move sidebar ns to correct location

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

@@ -28,7 +28,7 @@
    [app.main.ui.workspace.palette :refer [palette]]
    [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
-   [app.main.ui.workspace.sidebar.sidebar :refer [left-sidebar right-sidebar]]
+   [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
    [app.main.ui.workspace.textpalette :refer [textpalette]]
    [app.main.ui.workspace.viewport :refer [viewport]]
    [app.util.dom :as dom]

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

@@ -4,9 +4,10 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.sidebar.sidebar
+(ns app.main.ui.workspace.sidebar
   (:require-macros [app.main.style :refer [css]])
   (:require
+   [app.common.data.macros :as dm]
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -30,64 +31,69 @@
 ;; --- Left Sidebar (Component)
 
 (mf/defc left-sidebar
-  {:wrap [mf/memo]}
+  {::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
   [{:keys [layout] :as props}]
   (let [options-mode   (mf/deref refs/options-mode-global)
         mode-inspect?  (= options-mode :inspect)
+
         section        (cond (or mode-inspect? (contains? layout :layers)) :layers
                              (contains? layout :assets) :assets)
         shortcuts?     (contains? layout :shortcuts)
         show-debug?    (contains? layout :debug-panel)
-        new-css-system (mf/use-ctx ctx/new-css-system)
+        new-css?       (mf/use-ctx ctx/new-css-system)
+
         {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
         (use-resize-hook :left-sidebar 255 255 500 :x false :left)
 
         handle-collapse
-        (fn []
+        (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
-          (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))]
+
+        on-tab-change
+        (mf/use-fn #(st/emit! (dw/go-to-layout %)))
+        ]
 
     [:aside {:ref parent-ref
-             :class (if new-css-system
+             :class (if ^boolean new-css?
                       (dom/classnames (css :left-settings-bar) true)
                       (dom/classnames :settings-bar true
                                       :settings-bar-left true
                                       :two-row   (<= size 300)
                                       :three-row (and (> size 300) (<= size 400))
                                       :four-row  (> size 400)))
-             :style #js {"--width" (str size "px")}}
+             :style #js {"--width" (dm/str size "px")}}
 
      [:div {:on-pointer-down on-pointer-down
             :on-lost-pointer-capture on-lost-pointer-capture
             :on-pointer-move on-pointer-move
-            :class (if new-css-system
+            :class (if ^boolean new-css?
                      (dom/classnames (css :resize-area) true)
                      (dom/classnames :resize-area true))}]
-     [:div {:class (if new-css-system
+     [:div {:class (if ^boolean new-css?
                      (dom/classnames (css :settings-bar-inside) true)
                      (dom/classnames :settings-bar-inside true))}
       (cond
-        shortcuts?
+        (true? shortcuts?)
         [:& shortcuts-container]
 
-        show-debug?
+        (true? show-debug?)
         [:& debug-panel]
 
         :else
-        [:*
+        (if ^boolean new-css?
-
+          [:& tab-container
-         (if new-css-system
+           {:on-change-tab on-tab-change
-           [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
             :selected section
             :shortcuts? shortcuts?
             :collapsable? true
             :handle-collapse handle-collapse}
-            [:& tab-element {:id :layers
+
-                             :title (tr "workspace.sidebar.layers")}
+           [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
             [:div {:class (dom/classnames (css :layers-tab) true)}
              [:& sitemap {:layout layout}]
              [:& layers-toolbox {:size-parent size}]]]
 
-            (when-not mode-inspect?
+           (when-not ^boolean mode-inspect?
              [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
               [:& assets-toolbox]])]
 
@@ -96,54 +102,51 @@
             {:on-click handle-collapse
              :aria-label (tr "workspace.sidebar.collapse")}
             i/arrow-slide]
-            [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
+
+           [:& tab-container
+            {:on-change-tab on-tab-change
              :selected section
              :shortcuts? shortcuts?
              :collapsable? true
              :handle-collapse handle-collapse}
-             [:& tab-element {:id :layers
+
-                               :title (tr "workspace.sidebar.layers")}
+            [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
              [:div {:class (dom/classnames :layers-tab true)}
               [:& sitemap {:layout layout}]
               [:& layers-toolbox {:size-parent size}]]]
 
-             (when-not mode-inspect?
+            (when-not ^boolean mode-inspect?
               [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
-                [:& assets-toolbox]])]])])]]))
+               [:& assets-toolbox]])]]))]]))
 
 ;; --- Right Sidebar (Component)
 
 (mf/defc right-sidebar
   {::mf/wrap-props false
    ::mf/wrap [mf/memo]}
-  [props]
+  [{:keys [layout section] :as props}]
-  (let [layout          (obj/get props "layout")
+  (let [drawing-tool     (:tool (mf/deref refs/workspace-drawing))
-        section         (obj/get props "section")
-        drawing-tool    (:tool (mf/deref refs/workspace-drawing))
 
         is-comments?     (= drawing-tool :comments)
         is-history?      (contains? layout :document-history)
         is-inspect?      (= section :inspect)
 
         expanded?        (mf/deref refs/inspect-expanded)
-        can-be-expanded? (and
+        can-be-expanded? (and (not is-comments?)
-                          (not is-comments?)
                               (not is-history?)
                               is-inspect?)]
 
-    (mf/use-effect
+    (mf/with-effect [can-be-expanded?]
-     (mf/deps can-be-expanded?)
-     (fn []
       (when (not can-be-expanded?)
-         (st/emit! (dw/set-inspect-expanded false)))))
+        (st/emit! (dw/set-inspect-expanded false))))
 
     [:aside.settings-bar.settings-bar-right {:class (when (and can-be-expanded? expanded?) "expanded")}
      [:div.settings-bar-inside
       (cond
-        is-comments?
+        (true? is-comments?)
         [:& comments-sidebar]
 
-        is-history?
+        (true? is-history?)
         [:& history-toolbox]
 
         :else