✨ Fix linter issues on frontend (part 5).

frontend/src/app/main/ui/shapes/attrs.cljs

@@ -6,12 +6,11 @@
 
 (ns app.main.ui.shapes.attrs
   (:require
-   [rumext.alpha :as mf]
-   [cuerdas.core :as str]
-   [app.common.data :as d]
-   [app.util.object :as obj]
    [app.main.ui.context :as muc]
-   [app.util.svg :as usvg]))
+   [app.util.object :as obj]
+   [app.util.svg :as usvg]
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]))
 
 (defn- stroke-type->dasharray
   [style]

frontend/src/app/main/ui/shapes/circle.cljs

@@ -6,17 +6,17 @@
 
 (ns app.main.ui.shapes.circle
   (:require
-   [rumext.alpha :as mf]
+   [app.common.geom.shapes :as geom]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
-   [app.common.geom.shapes :as geom]
+   [app.util.object :as obj]
-   [app.util.object :as obj]))
+   [rumext.alpha :as mf]))
 
 (mf/defc circle-shape
   {::mf/wrap-props false}
   [props]
   (let [shape (unchecked-get props "shape")
-        {:keys [id x y width height]} shape
+        {:keys [x y width height]} shape
         transform (geom/transform-matrix shape)
 
         cx (+ x (/ width 2))

frontend/src/app/main/ui/shapes/custom_stroke.cljs

@@ -7,8 +7,6 @@
 (ns app.main.ui.shapes.custom-stroke
   (:require
    [app.common.data :as d]
-   [app.common.geom.shapes :as geom]
-   [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
    [app.util.object :as obj]
    [cuerdas.core :as str]
@@ -26,7 +24,7 @@
     (-> props (obj/merge #js {:style style}))))
 
 (mf/defc inner-stroke-clip-path
-  [{:keys [shape render-id]}]
+  [{:keys [render-id]}]
   (let [clip-id (str "inner-stroke-" render-id)
         shape-id (str "stroke-shape-" render-id)]
     [:> "clipPath" #js {:id clip-id}
@@ -70,8 +68,6 @@
         child        (obj/get props "children")
         base-props   (obj/get child "props")
         elem-name    (obj/get child "type")
-        shape        (obj/get props "shape")
-        stroke-width (:stroke-width shape 0)
         stroke-mask-id (str "outer-stroke-" render-id)
         shape-id (str "stroke-shape-" render-id)
 
@@ -148,8 +144,8 @@
         stroke-width (:stroke-width shape 0)
         stroke-style (:stroke-style shape :none)
         stroke-position (:stroke-alignment shape :center)
-        has-stroke? (and (and (> stroke-width 0)
+        has-stroke? (and (> stroke-width 0)
-                              (not= stroke-style :none)))
+                         (not= stroke-style :none))
         inner? (= :inner stroke-position)
         outer? (= :outer stroke-position)]
 

frontend/src/app/main/ui/shapes/export.cljs

@@ -7,7 +7,6 @@
 (ns app.main.ui.shapes.export
  (:require
   [app.common.data :as d]
-  [app.common.geom.matrix :as gmt]
   [app.common.geom.shapes :as gsh]
   [app.util.json :as json]
   [app.util.object :as obj]
@@ -47,8 +46,7 @@
                (cond-> props
                  (some? val)
                  (obj/set! ns-attr (trfn val))))))]
-    (let [frame? (= :frame (:type shape))
+    (let [group? (= :group (:type shape))
-          group? (= :group (:type shape))
           rect?  (= :rect (:type shape))
           text?  (= :text (:type shape))
           mask?  (and group? (:masked-group? shape))
@@ -175,6 +173,6 @@
 
 
      (when (and (= (:type shape) :frame)
-                (not (empty? (:grids shape))))
+                (seq (:grids shape)))
        [:& export-grid-data {:grids (:grids shape)}])]))
 

frontend/src/app/main/ui/shapes/filters.cljs

@@ -84,7 +84,7 @@
                 :result filter-id}]]))
 
 (mf/defc background-blur-filter
-  [{:keys [filter-id filter-in params]}]
+  [{:keys [filter-id params]}]
   [:*
    [:feGaussianBlur {:in "BackgroundImage"
                      :stdDeviation (/ (:value params) 2)}]

frontend/src/app/main/ui/shapes/frame.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.shapes.frame
   (:require
-   [app.common.data :as d]
    [app.main.ui.shapes.attrs :as attrs]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
@@ -20,7 +19,7 @@
     [props]
     (let [childs     (unchecked-get props "childs")
           shape      (unchecked-get props "shape")
-          {:keys [id width height]} shape
+          {:keys [width height]} shape
 
           props (-> (merge frame-default-props shape)
                     (attrs/extract-style-attrs)
@@ -32,7 +31,7 @@
                           :className "frame-background"}))]
       [:*
        [:> :rect props]
-       (for [[i item] (d/enumerate childs)]
+       (for [item childs]
          [:& shape-wrapper {:frame shape
                             :shape item
                             :key (:id item)}])])))

frontend/src/app/main/ui/shapes/gradients.cljs

@@ -6,18 +6,15 @@
 
 (ns app.main.ui.shapes.gradients
   (:require
-   [rumext.alpha :as mf]
-   [cuerdas.core :as str]
-   [app.util.object :as obj]
-   [app.common.uuid :as uuid]
-   [app.main.ui.context :as muc]
-   [app.common.geom.point :as gpt]
    [app.common.geom.matrix :as gmt]
-   [app.common.geom.shapes :as gsh]))
+   [app.common.geom.point :as gpt]
+   [app.common.geom.shapes :as gsh]
+   [app.main.ui.context :as muc]
+   [app.util.object :as obj]
+   [rumext.alpha :as mf]))
 
 (mf/defc linear-gradient [{:keys [id gradient shape]}]
-  (let [{:keys [x y width height]} (:selrect shape)
+  (let [transform (when (= :path (:type shape)) (gsh/transform-matrix shape nil (gpt/point 0.5 0.5)))]
-        transform (when (= :path (:type shape)) (gsh/transform-matrix shape nil (gpt/point 0.5 0.5)))]
     [:> :linearGradient #js {:id id
                              :x1 (:start-x gradient)
                              :y1 (:start-y gradient)
@@ -43,49 +40,46 @@
 
 (mf/defc radial-gradient [{:keys [id gradient shape]}]
   (let [{:keys [x y width height]} (:selrect shape)
-        center (gsh/center-shape shape)
         transform (if (= :path (:type shape))
                     (gsh/transform-matrix shape)
-                    (gmt/matrix))]
+                    (gmt/matrix))
-    (let [[x y] (if (= (:type shape) :frame) [0 0] [x y])
+        [x y] (if (= (:type shape) :frame) [0 0] [x y])
-          translate-vec (gpt/point (+ x (* width (:start-x gradient)))
+        translate-vec (gpt/point (+ x (* width (:start-x gradient)))
-                                   (+ y (* height (:start-y gradient))))
+                                 (+ y (* height (:start-y gradient))))
 
-          gradient-vec (gpt/to-vec (gpt/point (* width (:start-x gradient))
+        gradient-vec (gpt/to-vec (gpt/point (* width (:start-x gradient))
-                                              (* height (:start-y gradient)))
+                                            (* height (:start-y gradient)))
-                                   (gpt/point (* width (:end-x gradient))
+                                 (gpt/point (* width (:end-x gradient))
-                                              (* height (:end-y gradient))))
+                                            (* height (:end-y gradient))))
 
-          angle (gpt/angle gradient-vec
+        angle (gpt/angle gradient-vec
-                           (gpt/point 1 0))
+                         (gpt/point 1 0))
 
-          shape-height-vec (gpt/point 0 (/ height 2))
+        scale-factor-y (/ (gpt/length gradient-vec) (/ height 2))
+        scale-factor-x (* scale-factor-y (:width gradient))
 
-          scale-factor-y (/ (gpt/length gradient-vec) (/ height 2))
+        scale-vec (gpt/point (* scale-factor-y (/ height 2))
-          scale-factor-x (* scale-factor-y (:width gradient))
+                             (* scale-factor-x (/ width 2)))
 
-          scale-vec (gpt/point (* scale-factor-y (/ height 2))
+        transform (gmt/multiply transform
-                               (* scale-factor-x (/ width 2)))
+                                (gmt/translate-matrix translate-vec)
+                                (gmt/rotate-matrix angle)
+                                (gmt/scale-matrix scale-vec))
 
-          transform (gmt/multiply transform
+        base-props #js {:id id
-                                  (gmt/translate-matrix translate-vec)
+                        :cx 0
-                                  (gmt/rotate-matrix angle)
+                        :cy 0
-                                  (gmt/scale-matrix scale-vec))
+                        :r 1
+                        :gradientUnits "userSpaceOnUse"
+                        :gradientTransform transform}
 
-          base-props #js {:id id
+        props (-> base-props (add-metadata gradient))]
-                          :cx 0
+    [:> :radialGradient props
-                          :cy 0
+     (for [{:keys [offset color opacity]} (:stops gradient)]
-                          :r 1
+       [:stop {:key (str id "-stop-" offset)
-                          :gradientUnits "userSpaceOnUse"
+               :offset (or offset 0)
-                          :gradientTransform transform}
+               :stop-color color
-
+               :stop-opacity opacity}])]))
-          props (-> base-props (add-metadata gradient))]
-      [:> :radialGradient props
-       (for [{:keys [offset color opacity]} (:stops gradient)]
-         [:stop {:key (str id "-stop-" offset)
-                 :offset (or offset 0)
-                 :stop-color color
-                 :stop-opacity opacity}])])))
 
 (mf/defc gradient
   {::mf/wrap-props false}

frontend/src/app/main/ui/shapes/group.cljs

@@ -6,10 +6,9 @@
 
 (ns app.main.ui.shapes.group
   (:require
+   [app.main.ui.shapes.mask :refer [mask-str clip-str mask-factory]]
    [app.util.object :as obj]
-   [rumext.alpha :as mf]
+   [rumext.alpha :as mf]))
-   [app.main.ui.shapes.attrs :as attrs]
-   [app.main.ui.shapes.mask :refer [mask-str clip-str mask-factory]]))
 
 (defn group-shape
   [shape-wrapper]
@@ -20,9 +19,8 @@
       (let [frame          (unchecked-get props "frame")
             shape          (unchecked-get props "shape")
             childs         (unchecked-get props "childs")
-            pointer-events (unchecked-get props "pointer-events")
 
-            {:keys [id x y width height masked-group?]} shape
+            masked-group?  (:masked-group? shape)
 
             [mask childs]  (if masked-group?
                              [(first childs) (rest childs)]

frontend/src/app/main/ui/shapes/image.cljs

@@ -7,39 +7,38 @@
 (ns app.main.ui.shapes.image
   (:require
    [app.common.geom.shapes :as geom]
+   [app.config :as cfg]
    [app.main.ui.shapes.attrs :as attrs]
-   [app.main.ui.shapes.embed :as se]
+   [app.main.ui.shapes.embed :as embed]
    [app.util.dom :as dom]
    [app.util.object :as obj]
-   [rumext.alpha :as mf]
+   [rumext.alpha :as mf]))
-   [app.config :as cfg]
-   [app.main.ui.shapes.embed :as embed]))
 
 (mf/defc image-shape
   {::mf/wrap-props false}
   [props]
 
   (let [shape (unchecked-get props "shape")
-        {:keys [id x y width height rotation metadata]} shape
+        {:keys [x y width height metadata]} shape
-        uri (cfg/resolve-file-media metadata)
+        uri   (cfg/resolve-file-media metadata)
-        embed (embed/use-data-uris [uri])]
+        embed (embed/use-data-uris [uri])
 
-    (let [transform (geom/transform-matrix shape)
+        transform (geom/transform-matrix shape)
-          props (-> (attrs/extract-style-attrs shape)
+        props (-> (attrs/extract-style-attrs shape)
-                    (obj/merge!
+                  (obj/merge!
-                     #js {:x x
+                   #js {:x x
-                          :y y
+                        :y y
-                          :transform transform
+                        :transform transform
-                          :width width
+                        :width width
-                          :height height
+                        :height height
-                          :preserveAspectRatio "none"
+                        :preserveAspectRatio "none"
-                          :data-loading (str (not (contains? embed uri)))}))
+                        :data-loading (str (not (contains? embed uri)))}))
 
-          on-drag-start (fn [event]
+        on-drag-start (fn [event]
-                          ;; Prevent browser dragging of the image
+                        ;; Prevent browser dragging of the image
-                          (dom/prevent-default event))]
+                        (dom/prevent-default event))]
 
-      [:> "image" (obj/merge!
+    [:> "image" (obj/merge!
-                   props
+                 props
-                   #js {:xlinkHref (get embed uri uri)
+                 #js {:xlinkHref (get embed uri uri)
-                        :onDragStart on-drag-start})])))
+                      :onDragStart on-drag-start})]))

frontend/src/app/main/ui/shapes/mask.cljs

@@ -6,9 +6,9 @@
 
 (ns app.main.ui.shapes.mask
   (:require
-   [rumext.alpha :as mf]
+   [app.common.geom.shapes :as gsh]
    [cuerdas.core :as str]
-   [app.common.geom.shapes :as gsh]))
+   [rumext.alpha :as mf]))
 
 (defn mask-str [mask]
   (str/fmt "url(#%s)" (str (:id mask) "-mask")))

frontend/src/app/main/ui/shapes/path.cljs

@@ -6,26 +6,23 @@
 
 (ns app.main.ui.shapes.path
   (:require
-   [cuerdas.core :as str]
-   [rumext.alpha :as mf]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
    [app.util.object :as obj]
-   [app.util.path.format :as upf]))
+   [app.util.path.format :as upf]
+   [rumext.alpha :as mf]))
 
 ;; --- Path Shape
 
 (mf/defc path-shape
   {::mf/wrap-props false}
   [props]
-  (let [shape (unchecked-get props "shape")
+  (let [shape   (unchecked-get props "shape")
-        background? (unchecked-get props "background?")
-        {:keys [id x y width height]} (:selrect shape)
         content (:content shape)
-        pdata (mf/use-memo (mf/deps content) #(upf/format-path content))
+        pdata   (mf/use-memo (mf/deps content) #(upf/format-path content))
-        props (-> (attrs/extract-style-attrs shape)
+        props   (-> (attrs/extract-style-attrs shape)
-                  (obj/merge!
+                    (obj/merge!
-                   #js {:d pdata}))]
+                     #js {:d pdata}))]
     [:& shape-custom-stroke {:shape shape}
      [:> :path props]]))
 

frontend/src/app/main/ui/shapes/rect.cljs

@@ -9,7 +9,6 @@
    [app.common.geom.shapes :as gsh]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.custom-stroke :refer [shape-custom-stroke]]
-   [app.main.ui.shapes.gradients :refer [gradient]]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
@@ -17,7 +16,7 @@
   {::mf/wrap-props false}
   [props]
   (let [shape (unchecked-get props "shape")
-        {:keys [id x y width height]} shape
+        {:keys [x y width height]} shape
         transform (gsh/transform-matrix shape)
 
         props (-> (attrs/extract-style-attrs shape)

frontend/src/app/main/ui/shapes/svg_defs.cljs

@@ -100,7 +100,8 @@
           (cond->> id
             (contains? svg-defs id) (str render-id "-")))]
 
-    (when (and svg-defs (not (empty? svg-defs)))
+    ;; TODO: no key?
+    (when (seq svg-defs)
       (for [svg-def (vals svg-defs)]
         [:& svg-node {:node svg-def
                       :prefix-id prefix-id

frontend/src/app/main/ui/shapes/svg_raw.cljs

@@ -6,15 +6,10 @@
 
 (ns app.main.ui.shapes.svg-raw
   (:require
-   [app.common.data :as cd]
-   [app.common.geom.matrix :as gmt]
-   [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
    [app.main.ui.shapes.attrs :as usa]
-   [app.util.data :as ud]
    [app.util.object :as obj]
    [app.util.svg :as usvg]
-   [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
 ;; Graphic tags
@@ -53,7 +48,7 @@
         children (unchecked-get props "children")
 
         {:keys [x y width height]} shape
-        {:keys [tag attrs] :as content} (:content shape)
+        {:keys [attrs] :as content} (:content shape)
 
         ids-mapping (mf/use-memo #(usvg/generate-id-mapping content))
 
@@ -85,9 +80,7 @@
         element-id (get-in content [:attrs :id])
         attrs (cond-> (set-styles attrs shape)
                 (and element-id (contains? ids-mapping element-id))
-                (obj/set! "id" (get ids-mapping element-id)))
+                (obj/set! "id" (get ids-mapping element-id)))]
-
-        {:keys [x y width height]} (:selrect shape)]
     [:> (name tag) attrs children]))
 
 (defn svg-raw-shape [shape-wrapper]

frontend/src/app/main/ui/shapes/text.cljs

@@ -8,12 +8,9 @@
   (:require
    [app.common.data :as d]
    [app.common.geom.shapes :as geom]
-   [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.text.styles :as sts]
-   [app.util.color :as uc]
    [app.util.object :as obj]
-   [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
 (mf/defc render-text
@@ -40,8 +37,7 @@
 (mf/defc render-paragraph-set
   {::mf/wrap-props false}
   [props]
-  (let [node     (obj/get props "node")
+  (let [children (obj/get props "children")
-        children (obj/get props "children")
         shape    (obj/get props "shape")
         style    (sts/generate-paragraph-set-styles shape)]
     [:div.paragraph-set {:style style} children]))

frontend/src/app/main/ui/shapes/text/fontfaces.cljs

@@ -75,5 +75,5 @@
         ;; Creates a style tag by replacing the urls with the data uri
         style (replace-embeds fonts-css fonts-urls fonts-embed)]
 
-    (when (and (some? style) (not (empty? style)))
+    (when (seq style)
       [:style style])))

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -15,7 +15,7 @@
 
 (defn generate-root-styles
   [shape node]
-  (let [valign (or (:vertical-align node "top"))
+  (let [valign (:vertical-align node "top")
         base   #js {:height (or (:height shape) "100%")
                     :width  (or (:width shape) "100%")}]
     (cond-> base
@@ -104,18 +104,18 @@
     (when (and (string? font-id)
                (pos? (alength font-id)))
       (fonts/ensure-loaded! font-id)
-      (let [font (get fontsdb font-id)]
+      (let [font         (get fontsdb font-id)
-        (let [font-family  (str/quote
+            font-family  (str/quote
-                            (or (:family font)
+                          (or (:family font)
-                                (:font-family data)))
+                              (:font-family data)))
-              font-variant (d/seek #(= font-variant-id (:id %))
+            font-variant (d/seek #(= font-variant-id (:id %))
-                                   (:variants font))
+                                 (:variants font))
-              font-style   (or (:style font-variant)
+            font-style   (or (:style font-variant)
-                               (:font-style data))
+                             (:font-style data))
-              font-weight  (or (:weight font-variant)
+            font-weight  (or (:weight font-variant)
-                               (:font-weight data))]
+                             (:font-weight data))]
-          (obj/set! base "fontFamily" font-family)
+        (obj/set! base "fontFamily" font-family)
-          (obj/set! base "fontStyle" font-style)
+        (obj/set! base "fontStyle" font-style)
-          (obj/set! base "fontWeight" font-weight))))
+        (obj/set! base "fontWeight" font-weight)))
 
     base))

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

@@ -10,12 +10,9 @@
    [app.main.data.users :as du]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.util.i18n :refer [tr]]
    [app.util.router :as rt]
-   [cljs.spec.alpha :as s]
-   [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
 (defn- go-to-dashboard
@@ -24,7 +21,7 @@
     (st/emit! (rt/nav :dashboard-projects {:team-id team-id}))))
 
 (mf/defc not-found
-  [{:keys [error] :as props}]
+  []
   (let [profile (mf/deref refs/profile)]
     [:section.exception-layout
      [:div.exception-header
@@ -42,7 +39,7 @@
          (tr "labels.sign-out")]]]]]))
 
 (mf/defc bad-gateway
-  [{:keys [error] :as props}]
+  []
   (let [profile (mf/deref refs/profile)]
     [:section.exception-layout
      [:div.exception-header
@@ -59,7 +56,7 @@
          (tr "labels.retry")]]]]]))
 
 (mf/defc service-unavailable
-  [{:keys [error] :as props}]
+  []
   (let [profile (mf/deref refs/profile)]
     [:section.exception-layout
      [:div.exception-header
@@ -76,7 +73,7 @@
          (tr "labels.retry")]]]]]))
 
 (mf/defc internal-error
-  [props]
+  []
   (let [profile (mf/deref refs/profile)]
     [:section.exception-layout
      [:div.exception-header

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

@@ -7,7 +7,6 @@
 (ns app.main.ui.viewer
   (:require
    [app.common.data :as d]
-   [app.common.exceptions :as ex]
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as geom]
@@ -19,9 +18,8 @@
    [app.main.store :as st]
    [app.main.ui.comments :as cmt]
    [app.main.ui.hooks :as hooks]
-   [app.main.ui.icons :as i]
    [app.main.ui.viewer.header :refer [header]]
-   [app.main.ui.viewer.shapes :as shapes :refer [frame-svg]]
+   [app.main.ui.viewer.shapes :as shapes]
    [app.main.ui.viewer.thumbnails :refer [thumbnails-panel]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [t tr]]
@@ -44,7 +42,7 @@
   (l/derived :comments-local st/state))
 
 (mf/defc comments-layer
-  [{:keys [width height zoom frame data] :as props}]
+  [{:keys [zoom frame data] :as props}]
   (let [profile     (mf/deref refs/profile)
 
         modifier1   (-> (gpt/point (:x frame) (:y frame))
@@ -62,7 +60,7 @@
         mframe      (geom/transform-shape frame)
         threads     (->> (vals threads-map)
                          (dcm/apply-filters cstate profile)
-                         (filter (fn [{:keys [seqn position]}]
+                         (filter (fn [{:keys [position]}]
                                    (frame-contains? mframe position))))
 
         on-bubble-click
@@ -127,7 +125,7 @@
 
 (mf/defc viewport
   {::mf/wrap [mf/memo]}
-  [{:keys [state data index section] :or {zoom 1} :as props}]
+  [{:keys [state data index section] :as props}]
   (let [zoom          (:zoom state)
         objects       (:objects data)
 

frontend/src/app/main/ui/viewer/shapes.cljs

@@ -13,10 +13,8 @@
    [app.common.geom.shapes :as geom]
    [app.common.pages :as cp]
    [app.main.data.viewer :as dv]
-   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.shapes.circle :as circle]
-   [app.main.ui.shapes.filters :as filters]
    [app.main.ui.shapes.frame :as frame]
    [app.main.ui.shapes.group :as group]
    [app.main.ui.shapes.image :as image]
@@ -62,13 +60,10 @@
   (mf/fnc generic-wrapper
     {::mf/wrap-props false}
     [props]
-    (let [shape (unchecked-get props "shape")
+    (let [shape   (unchecked-get props "shape")
           objects (unchecked-get props "objects")
-          {:keys [x y width height]} (:selrect shape)
+          childs  (unchecked-get props "childs")
-          frame? (= :frame (:type shape))
+          frame   (unchecked-get props "frame")
-
-          childs (unchecked-get props "childs")
-          frame  (unchecked-get props "frame")
 
           interactions (->> (:interactions shape)
                             (filter #(contains? objects (:destination %))))

frontend/src/app/main/ui/viewer/thumbnails.cljs

@@ -6,25 +6,16 @@
 
 (ns app.main.ui.viewer.thumbnails
   (:require
-   [goog.events :as events]
-   [goog.object :as gobj]
-   [rumext.alpha :as mf]
-   [app.main.ui.icons :as i]
    [app.common.data :as d]
-   [app.main.store :as st]
    [app.main.data.viewer :as dv]
-   [app.main.ui.components.dropdown :refer [dropdown']]
-   [app.main.ui.shapes.frame :as frame]
    [app.main.exports :as exports]
+   [app.main.store :as st]
+   [app.main.ui.components.dropdown :refer [dropdown']]
+   [app.main.ui.icons :as i]
    [app.util.data :refer [classnames]]
-   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
-   [app.common.geom.matrix :as gmt]
+   [goog.object :as gobj]
-   [app.common.geom.point :as gpt]
+   [rumext.alpha :as mf]))
-   [app.util.i18n :as i18n :refer [t tr]]
-   [app.common.math :as mth]
-   [app.util.router :as rt]
-   [app.main.data.viewer :as vd])
-  (:import goog.events.EventType))
 
 (mf/defc thumbnails-content
   [{:keys [children expanded? total] :as props}]
@@ -35,14 +26,14 @@
         offset (mf/use-state 0)
 
         on-left-arrow-click
-        (fn [event]
+        (fn [_]
           (swap! offset (fn [v]
                           (if (pos? v)
                             (dec v)
                             v))))
 
         on-right-arrow-click
-        (fn [event]
+        (fn [_]
           (let [visible (/ @width @element-width)
                 max-val (- total visible)]
             (swap! offset (fn [v]
@@ -90,26 +81,25 @@
     [:span.name {:title (:name frame)} (:name frame)]]])
 
 (mf/defc thumbnails-panel
-  [{:keys [data index screen] :as props}]
+  [{:keys [data index] :as props}]
   (let [expanded? (mf/use-state false)
         container (mf/use-ref)
-        page-id   (get-in data [:page :id])
-        file-id   (get-in data [:file :id])
 
         on-close #(st/emit! dv/toggle-thumbnails-panel)
         selected (mf/use-var false)
 
         on-mouse-leave
-        (fn [event]
+        (fn [_]
           (when @selected
             (on-close)))
 
         on-item-click
-        (fn [event index]
+        (fn [_ index]
           (compare-and-set! selected false true)
           (st/emit! (dv/go-to-frame-by-index index))
           (when @expanded?
             (on-close)))]
+
     [:& dropdown' {:on-close on-close
                    :container container
                    :show true}

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

@@ -97,7 +97,7 @@
        (when page-id
          (st/emit! (dw/finalize-page page-id))))))
 
-  (when-let [page (mf/deref trimmed-page-ref)]
+  (when (mf/deref trimmed-page-ref)
     [:& workspace-content {:key page-id
                            :file file
                            :layout layout}]))

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

@@ -7,14 +7,12 @@
 (ns app.main.ui.workspace.colorpalette
   (:require
    [app.common.math :as mth]
-   [app.main.data.workspace :as udw]
    [app.main.data.workspace.colors :as mdc]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.util.color :as uc]
    [app.util.i18n :refer [tr]]
@@ -39,14 +37,9 @@
   (-> (l/in [:workspace-local :selected-palette-size])
       (l/derived st/state)))
 
-(defn- make-selected-palette-item-ref
-  [lib-id]
-  (-> (l/in [:library-items :palettes lib-id])
-      (l/derived st/state)))
-
 ;; --- Components
 (mf/defc palette-item
-  [{:keys [color size local?]}]
+  [{:keys [color size]}]
   (let [select-color
         (fn [event]
           (let [ids (wsh/lookup-selected @st/state)]
@@ -70,13 +63,12 @@
         max-offset (- (count current-colors)
                       visible)
 
-        close-fn   #(st/emit! (udw/toggle-layout-flags :colorpalette))
         container  (mf/use-ref nil)
 
         on-left-arrow-click
         (mf/use-callback
          (mf/deps max-offset visible)
-         (fn [event]
+         (fn [_]
            (swap! state update :offset
                   (fn [offset]
                     (if (pos? offset)
@@ -86,7 +78,7 @@
         on-right-arrow-click
         (mf/use-callback
          (mf/deps max-offset visible)
-         (fn [event]
+         (fn [_]
            (swap! state update :offset
                   (fn [offset]
                     (if (< offset max-offset)
@@ -104,7 +96,7 @@
 
         on-resize
         (mf/use-callback
-         (fn [event]
+         (fn [_]
            (let [dom   (mf/ref-val container)
                  width (obj/get dom "clientWidth")]
              (swap! state assoc :width width))))]
@@ -132,7 +124,7 @@
             (when (= selected (:id cur-library)) i/tick)
             [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))]
             [:div.color-sample
-             (for [[idx {:keys [id color]}] (map-indexed vector (take 7 colors))]
+             (for [[idx {:keys [color]}] (map-indexed vector (take 7 colors))]
                [:& cb/color-bullet {:key (str "color-" idx)
                                     :color color}])]]))
 
@@ -193,8 +185,7 @@
 
 (mf/defc colorpalette
   []
-  (let [team-id       (mf/use-ctx ctx/current-team-id)
+  (let [recent-colors (mf/deref refs/workspace-recent-colors)
-        recent-colors (mf/deref refs/workspace-recent-colors)
         file-colors   (mf/deref refs/workspace-file-colors)
         shared-libs   (mf/deref refs/workspace-libraries)
         selected      (or (mf/deref selected-palette-ref) :recent)

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

@@ -6,28 +6,24 @@
 
 (ns app.main.ui.workspace.colorpicker
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
-   [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
-   [app.util.dom :as dom]
-   [app.util.color :as uc]
-   [app.util.object :as obj]
-   [app.main.store :as st]
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
    [app.main.data.modal :as modal]
+   [app.main.data.workspace.colors :as dc]
+   [app.main.data.workspace.libraries :as dwl]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
    [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]
+   [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
    [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
    [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
    [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
+   [app.main.ui.workspace.colorpicker.libraries :refer [libraries]]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
-   [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]
+   [app.util.color :as uc]
-   [app.main.ui.workspace.colorpicker.libraries :refer [libraries]]))
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [t]]
+   [cuerdas.core :as str]
+   [okulary.core :as l]
+   [rumext.alpha :as mf]))
 
 ;; --- Refs
 
@@ -127,7 +123,6 @@
         picking-color? (mf/deref picking-color?)
         picked-color (mf/deref picked-color)
         picked-color-select (mf/deref picked-color-select)
-        picked-shift? (mf/deref picked-shift?)
 
         editing-spot-state (mf/deref editing-spot-state-ref)
         current-gradient (mf/deref current-gradient-ref)
@@ -156,11 +151,11 @@
         handle-change-stop
         (fn [offset]
           (when-let [offset-color (get-in @state [:stops offset])]
-            (do (swap! state assoc
+            (swap! state assoc
-                       :current-color offset-color
+                   :current-color offset-color
-                       :editing-stop offset)
+                   :editing-stop offset)
 
-                (st/emit! (dc/select-gradient-stop offset)))))
+            (st/emit! (dc/select-gradient-stop offset))))
 
         on-select-library-color
         (fn [color]
@@ -172,7 +167,7 @@
                   (on-change color)))))
 
         on-add-library-color
-        (fn [color]
+        (fn [_]
           (st/emit! (dwl/add-color (state->data @state))))
 
         on-activate-gradient
@@ -197,7 +192,7 @@
     (mf/use-effect
      (mf/deps current-color)
      (fn [] (let [node (mf/ref-val ref-picker)
-                  {:keys [r g b h s v]} current-color
+                  {:keys [r g b h v]} current-color
                   rgb [r g b]
                   hue-rgb (uc/hsv->rgb [h 1.0 255])
                   hsl-from (uc/hsv->hsl [h 0.0 v])
@@ -248,9 +243,8 @@
                                                             :end-x :end-y
                                                             :width])]
            (when (not= (:gradient-data @state) gradient-data)
-             (do
+             (reset! dirty? true)
-               (reset! dirty? true)
+             (swap! state assoc :gradient-data gradient-data))))))
-               (swap! state assoc :gradient-data gradient-data)))))))
 
     ;; Check if we've opened a color with gradient
     (mf/use-effect
@@ -265,7 +259,7 @@
     (mf/use-effect
      (mf/deps @state)
      (fn []
-       (if @dirty?
+       (when @dirty?
          (let [color (state->data @state)]
            (reset! dirty? false)
            (reset! last-color color)
@@ -357,7 +351,7 @@
 (mf/defc colorpicker-modal
   {::mf/register modal/components
    ::mf/register-as :colorpicker}
-  [{:keys [x y default data page position
+  [{:keys [x y data position
            disable-gradient
            disable-opacity
            on-change on-close on-accept] :as props}]
@@ -367,7 +361,7 @@
         position (or position :left)
         style (calculate-position vport position x y)
 
-        handle-change (fn [new-data shift-clicked?]
+        handle-change (fn [new-data _shift-clicked?]
                         (reset! dirty? (not= data new-data))
                         (reset! last-change new-data)
                         (when on-change

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

@@ -6,22 +6,10 @@
 
 (ns app.main.ui.workspace.colorpicker.color-inputs
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
    [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
-   [app.util.dom :as dom]
    [app.util.color :as uc]
-   [app.util.object :as obj]
+   [app.util.dom :as dom]
-   [app.main.store :as st]
+   [rumext.alpha :as mf]))
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
-   [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]))
 
 (mf/defc color-inputs [{:keys [type color disable-opacity on-change]}]
   (let [{red :r green :g blue :b

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

@@ -6,22 +6,8 @@
 
 (ns app.main.ui.workspace.colorpicker.gradients
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
    [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
+   [rumext.alpha :as mf]))
-   [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
-   [app.util.dom :as dom]
-   [app.util.color :as uc]
-   [app.util.object :as obj]
-   [app.main.store :as st]
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
-   [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]))
 
 (defn gradient->string [stops]
   (let [format-stop

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

@@ -6,24 +6,14 @@
 
 (ns app.main.ui.workspace.colorpicker.harmony
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
    [app.common.geom.point :as gpt]
    [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
+   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
-   [app.util.dom :as dom]
    [app.util.color :as uc]
+   [app.util.dom :as dom]
    [app.util.object :as obj]
-   [app.main.store :as st]
+   [cuerdas.core :as str]
-   [app.main.refs :as refs]
+   [rumext.alpha :as mf]))
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
-   [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]
-   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
-
 
 (defn create-color-wheel
   [canvas-node]
@@ -100,7 +90,7 @@
                             (on-change {:hex hex
                                         :r r :g g :b b
                                         :v new-value})))
-        on-complement-click (fn [ev]
+        on-complement-click (fn [_]
                               (let [new-hue (mod (+ hue 180) 360)
                                     hex (uc/hsv->hex [new-hue saturation value])
                                     [r g b] (uc/hex->rgb hex)]

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

@@ -6,23 +6,9 @@
 
 (ns app.main.ui.workspace.colorpicker.hsva
   (:require
-   [rumext.alpha :as mf]
+   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
-   [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
-   [app.util.dom :as dom]
    [app.util.color :as uc]
-   [app.util.object :as obj]
+   [rumext.alpha :as mf]))
-   [app.main.store :as st]
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
-   [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]
-   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
 
 (mf/defc hsva-selector [{:keys [color disable-opacity on-change]}]
   (let [{hue :h saturation :s value :v alpha :alpha} color

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

@@ -6,42 +6,29 @@
 
 (ns app.main.ui.workspace.colorpicker.libraries
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
-   [app.common.math :as math]
    [app.common.uuid :refer [uuid]]
-   [app.util.dom :as dom]
-   [app.util.color :as uc]
-   [app.util.object :as obj]
-   [app.main.store :as st]
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
+   [app.main.refs :as refs]
-   [app.main.ui.icons :as i]
+   [app.main.store :as st]
-   [app.util.i18n :as i18n :refer [t]]
    [app.main.ui.components.color-bullet :refer [color-bullet]]
-   [app.main.ui.workspace.colorpicker.gradients :refer [gradients]]
+   [app.main.ui.icons :as i]
-   [app.main.ui.workspace.colorpicker.harmony :refer [harmony-selector]]
+   [app.util.dom :as dom]
-   [app.main.ui.workspace.colorpicker.hsva :refer [hsva-selector]]
+   [app.util.i18n :as i18n :refer [tr]]
-   [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
+   [okulary.core :as l]
-   [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]]))
+   [rumext.alpha :as mf]))
 
 (def selected-palette-ref
   (-> (l/in [:workspace-local :selected-palette-colorpicker])
       (l/derived st/state)))
 
-(mf/defc libraries [{:keys [current-color on-select-color on-add-library-color
+(mf/defc libraries
-                            disable-gradient disable-opacity]}]
+  [{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}]
   (let [selected-library       (or (mf/deref selected-palette-ref) :recent)
         current-library-colors (mf/use-state [])
 
         shared-libs      (mf/deref refs/workspace-libraries)
         file-colors      (mf/deref refs/workspace-file-colors)
         recent-colors    (mf/deref refs/workspace-recent-colors)
-        locale           (mf/deref i18n/locale)
 
         parse-selected
         (fn [selected-str]
@@ -85,8 +72,8 @@
                             (when-let [val (parse-selected (dom/get-target-val e))]
                               (st/emit! (dc/change-palette-selected-colorpicker val))))
                :value (name selected-library)}
-      [:option {:value "recent"} (t locale "workspace.libraries.colors.recent-colors")]
+      [:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")]
-      [:option {:value "file"} (t locale "workspace.libraries.colors.file-library")]
+      [:option {:value "file"} (tr "workspace.libraries.colors.file-library")]
 
       (for [[_ {:keys [name id]}] shared-libs]
         [:option {:key id

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

@@ -6,26 +6,14 @@
 
 (ns app.main.ui.workspace.colorpicker.ramp
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
    [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
-   [app.util.dom :as dom]
-   [app.util.color :as uc]
-   [app.util.object :as obj]
-   [app.main.store :as st]
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
-   [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]
    [app.main.ui.components.color-bullet :refer [color-bullet]]
-   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]))
+   [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]]
+   [app.util.color :as uc]
+   [app.util.dom :as dom]
+   [rumext.alpha :as mf]))
 
-(mf/defc value-saturation-selector [{:keys [hue saturation value on-change]}]
+(mf/defc value-saturation-selector [{:keys [saturation value on-change]}]
   (let [dragging? (mf/use-state false)
         calculate-pos
         (fn [ev]

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

@@ -6,22 +6,10 @@
 
 (ns app.main.ui.workspace.colorpicker.slider-selector
   (:require
-   [rumext.alpha :as mf]
-   [okulary.core :as l]
-   [cuerdas.core :as str]
-   [app.common.geom.point :as gpt]
    [app.common.math :as math]
-   [app.common.uuid :refer [uuid]]
    [app.util.dom :as dom]
-   [app.util.color :as uc]
    [app.util.object :as obj]
-   [app.main.store :as st]
+   [rumext.alpha :as mf]))
-   [app.main.refs :as refs]
-   [app.main.data.workspace.libraries :as dwl]
-   [app.main.data.workspace.colors :as dc]
-   [app.main.data.modal :as modal]
-   [app.main.ui.icons :as i]
-   [app.util.i18n :as i18n :refer [t]]))
 
 (mf/defc slider-selector
   [{:keys [value class min-value max-value vertical? reverse? on-change]}]

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

@@ -16,7 +16,7 @@
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [t tr]]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.timers :as tm]
    [rumext.alpha :as mf]))
 
@@ -25,10 +25,8 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (mf/defc sidebar-options
-  [{:keys [local] :as props}]
+  []
   (let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
-        locale (mf/deref i18n/locale)
-
         update-mode
         (mf/use-callback
          (fn [mode]
@@ -43,19 +41,19 @@
      [:li {:class (dom/classnames :selected (or (= :all cmode) (nil? cmode)))
            :on-click #(update-mode :all)}
       [:span.icon i/tick]
-      [:span.label (t locale "labels.show-all-comments")]]
+      [:span.label (tr "labels.show-all-comments")]]
 
      [:li {:class (dom/classnames :selected (= :yours cmode))
            :on-click #(update-mode :yours)}
       [:span.icon i/tick]
-      [:span.label (t locale "labels.show-your-comments")]]
+      [:span.label (tr "labels.show-your-comments")]]
 
      [:hr]
 
      [:li {:class (dom/classnames :selected (= :pending cshow))
            :on-click #(update-show (if (= :pending cshow) :all :pending))}
       [:span.icon i/tick]
-      [:span.label (t locale "labels.hide-resolved-comments")]]]))
+      [:span.label (tr "labels.hide-resolved-comments")]]]))
 
 (mf/defc comments-sidebar
   []

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

@@ -9,23 +9,17 @@
   (:require
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
-   [app.main.data.workspace.common :as dwc]
-   [app.main.data.workspace.undo :as dwu]
    [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.shortcuts :as sc]
+   [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.streams :as ms]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.hooks :refer [use-rxsub]]
-   [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [app.util.i18n :refer [t] :as i18n]
+   [app.util.i18n :refer [tr] :as i18n]
    [app.util.timers :as timers]
-   [beicon.core :as rx]
    [okulary.core :as l]
-   [potok.core :as ptk]
    [rumext.alpha :as mf]))
 
 (def menu-ref
@@ -43,13 +37,12 @@
    [:span.shortcut (or shortcut "")]])
 
 (mf/defc menu-separator
-  [props]
+  []
   [:li.separator])
 
 (mf/defc shape-context-menu
   [{:keys [mdata] :as props}]
-  (let [locale (mf/deref i18n/locale)
+  (let [{:keys [id] :as shape} (:shape mdata)
-        {:keys [id] :as shape} (:shape mdata)
         selected (:selected mdata)
 
         single? (= (count selected) 1)
@@ -97,91 +90,91 @@
         do-update-remote-component (st/emitf (modal/show
                                                 {:type :confirm
                                                  :message ""
-                                                 :title (t locale "modals.update-remote-component.message")
+                                                 :title (tr "modals.update-remote-component.message")
-                                                 :hint (t locale "modals.update-remote-component.hint")
+                                                 :hint (tr "modals.update-remote-component.hint")
-                                                 :cancel-label (t locale "modals.update-remote-component.cancel")
+                                                 :cancel-label (tr "modals.update-remote-component.cancel")
-                                                 :accept-label (t locale "modals.update-remote-component.accept")
+                                                 :accept-label (tr "modals.update-remote-component.accept")
                                                  :accept-style :primary
                                                  :on-accept confirm-update-remote-component}))
         do-show-component (st/emitf (dw/go-to-layout :assets))
         do-navigate-component-file (st/emitf (dwl/nav-to-component-file
                                               (:component-file shape)))]
     [:*
-     [:& menu-entry {:title (t locale "workspace.shape.menu.copy")
+     [:& menu-entry {:title (tr "workspace.shape.menu.copy")
                      :shortcut (sc/get-tooltip :copy)
                      :on-click do-copy}]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.cut")
+     [:& menu-entry {:title (tr "workspace.shape.menu.cut")
                      :shortcut (sc/get-tooltip :cut)
                      :on-click do-cut}]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.paste")
+     [:& menu-entry {:title (tr "workspace.shape.menu.paste")
                      :shortcut (sc/get-tooltip :paste)
                      :on-click do-paste}]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.duplicate")
+     [:& menu-entry {:title (tr "workspace.shape.menu.duplicate")
                      :shortcut (sc/get-tooltip :duplicate)
                      :on-click do-duplicate}]
      [:& menu-separator]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.forward")
+     [:& menu-entry {:title (tr "workspace.shape.menu.forward")
                      :shortcut (sc/get-tooltip :bring-forward)
                      :on-click do-bring-forward}]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.front")
+     [:& menu-entry {:title (tr "workspace.shape.menu.front")
                      :shortcut (sc/get-tooltip :bring-front)
                      :on-click do-bring-to-front}]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.backward")
+     [:& menu-entry {:title (tr "workspace.shape.menu.backward")
                      :shortcut (sc/get-tooltip :bring-backward)
                      :on-click do-send-backward}]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.back")
+     [:& menu-entry {:title (tr "workspace.shape.menu.back")
                      :shortcut (sc/get-tooltip :bring-back)
                      :on-click do-send-to-back}]
      [:& menu-separator]
 
      (when multiple?
        [:*
-        [:& menu-entry {:title (t locale "workspace.shape.menu.group")
+        [:& menu-entry {:title (tr "workspace.shape.menu.group")
                         :shortcut (sc/get-tooltip :group)
                         :on-click do-create-group}]
-        [:& menu-entry {:title (t locale "workspace.shape.menu.mask")
+        [:& menu-entry {:title (tr "workspace.shape.menu.mask")
                         :shortcut (sc/get-tooltip :mask)
                         :on-click do-mask-group}]
         [:& menu-separator]])
 
      (when (or single? multiple?)
        [:*
-        [:& menu-entry {:title (t locale "workspace.shape.menu.flip-vertical")
+        [:& menu-entry {:title (tr "workspace.shape.menu.flip-vertical")
                         :shortcut (sc/get-tooltip :flip-vertical)
                         :on-click do-flip-vertical}]
-        [:& menu-entry {:title (t locale "workspace.shape.menu.flip-horizontal")
+        [:& menu-entry {:title (tr "workspace.shape.menu.flip-horizontal")
                         :shortcut (sc/get-tooltip :flip-horizontal)
                         :on-click do-flip-horizontal}]
         [:& menu-separator]])
 
      (when (and single? (= (:type shape) :group))
        [:*
-         [:& menu-entry {:title (t locale "workspace.shape.menu.ungroup")
+         [:& menu-entry {:title (tr "workspace.shape.menu.ungroup")
                          :shortcut (sc/get-tooltip :ungroup)
                          :on-click do-remove-group}]
          (if (:masked-group? shape)
-           [:& menu-entry {:title (t locale "workspace.shape.menu.unmask")
+           [:& menu-entry {:title (tr "workspace.shape.menu.unmask")
                            :shortcut (sc/get-tooltip :unmask)
                            :on-click do-unmask-group}]
-           [:& menu-entry {:title (t locale "workspace.shape.menu.mask")
+           [:& menu-entry {:title (tr "workspace.shape.menu.mask")
                            :shortcut (sc/get-tooltip :group)
                            :on-click do-mask-group}])])
 
      (when (and single? editable-shape?)
-       [:& menu-entry {:title (t locale "workspace.shape.menu.edit")
+       [:& menu-entry {:title (tr "workspace.shape.menu.edit")
                        :shortcut (sc/get-tooltip :start-editing)
                        :on-click do-start-editing}])
 
      (if (:hidden shape)
-       [:& menu-entry {:title (t locale "workspace.shape.menu.show")
+       [:& menu-entry {:title (tr "workspace.shape.menu.show")
                        :on-click do-show-shape}]
-       [:& menu-entry {:title (t locale "workspace.shape.menu.hide")
+       [:& menu-entry {:title (tr "workspace.shape.menu.hide")
                        :on-click do-hide-shape}])
 
      (if (:blocked shape)
-       [:& menu-entry {:title (t locale "workspace.shape.menu.unlock")
+       [:& menu-entry {:title (tr "workspace.shape.menu.unlock")
                        :on-click do-unlock-shape}]
-       [:& menu-entry {:title (t locale "workspace.shape.menu.lock")
+       [:& menu-entry {:title (tr "workspace.shape.menu.lock")
                        :on-click do-lock-shape}])
 
      (when (and (or (nil? (:shape-ref shape))
@@ -189,7 +182,7 @@
                 (not= (:type shape) :frame))
        [:*
         [:& menu-separator]
-        [:& menu-entry {:title (t locale "workspace.shape.menu.create-component")
+        [:& menu-entry {:title (tr "workspace.shape.menu.create-component")
                         :shortcut (sc/get-tooltip :create-component)
                         :on-click do-add-component}]])
 
@@ -201,41 +194,39 @@
        (if (= (:component-file shape) current-file-id)
          [:*
           [:& menu-separator]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
+          [:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
                           :on-click do-detach-component}]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
+          [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
                           :on-click do-reset-component}]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.update-main")
+          [:& menu-entry {:title (tr "workspace.shape.menu.update-main")
                           :on-click do-update-component}]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.show-main")
+          [:& menu-entry {:title (tr "workspace.shape.menu.show-main")
                           :on-click do-show-component}]]
          [:*
           [:& menu-separator]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.detach-instance")
+          [:& menu-entry {:title (tr "workspace.shape.menu.detach-instance")
                           :on-click do-detach-component}]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.reset-overrides")
+          [:& menu-entry {:title (tr "workspace.shape.menu.reset-overrides")
                           :on-click do-reset-component}]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.go-main")
+          [:& menu-entry {:title (tr "workspace.shape.menu.go-main")
                           :on-click do-navigate-component-file}]
-          [:& menu-entry {:title (t locale "workspace.shape.menu.update-main")
+          [:& menu-entry {:title (tr "workspace.shape.menu.update-main")
                           :on-click do-update-remote-component}]]))
 
      [:& menu-separator]
-     [:& menu-entry {:title (t locale "workspace.shape.menu.delete")
+     [:& menu-entry {:title (tr "workspace.shape.menu.delete")
                      :shortcut (sc/get-tooltip :delete)
                      :on-click do-delete}]]))
 
 (mf/defc viewport-context-menu
-  [{:keys [mdata] :as props}]
+  []
-  (let [locale (mf/deref i18n/locale)
+  (let [do-paste (st/emitf dw/paste)]
-        do-paste (st/emitf dw/paste)]
+    [:& menu-entry {:title (tr "workspace.shape.menu.paste")
-    [:*
+                    :shortcut (sc/get-tooltip :paste)
-     [:& menu-entry {:title (t locale "workspace.shape.menu.paste")
+                    :on-click do-paste}]))
-                     :shortcut (sc/get-tooltip :paste)
-                     :on-click do-paste}]]))
 
 (mf/defc context-menu
-  [props]
+  []
   (let [mdata (mf/deref menu-ref)
         top (- (get-in mdata [:position :y]) 20)
         left (get-in mdata [:position :x])

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

@@ -6,8 +6,8 @@
 
 (ns app.main.ui.workspace.coordinates
   (:require
-   [app.main.ui.hooks :as hooks]
    [app.main.streams :as ms]
+   [app.main.ui.hooks :as hooks]
    [rumext.alpha :as mf]))
 
 (mf/defc coordinates

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

@@ -68,7 +68,7 @@
              (dom/stop-propagation event)
 
              (let [toggle-selected? (and selected? shift?)
-                   deselect? (and (not selected?) (not (empty? selected)) (not shift?))]
+                   deselect? (and (not selected?) (seq selected) (not shift?))]
                (apply
                 st/emit!
                 (cond-> []

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

@@ -11,7 +11,6 @@
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.shortcuts :as sc]
-   [app.main.data.workspace.shortcuts :as sc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
@@ -89,8 +88,6 @@
   (let [show-menu? (mf/use-state false)
         editing? (mf/use-state false)
 
-        locale     (mf/deref i18n/locale)
-
         edit-input-ref (mf/use-ref nil)
 
         add-shared-fn
@@ -125,7 +122,7 @@
                      :on-accept del-shared-fn})))
 
 
-        handle-blur (fn [event]
+        handle-blur (fn [_]
                       (let [value (-> edit-input-ref mf/ref-val dom/get-value)]
                         (st/emit! (dw/rename-file (:id file) value)))
                       (reset! editing? false))
@@ -243,9 +240,7 @@
   [{:keys [file layout project page-id] :as props}]
   (let [team-id  (:team-id project)
         zoom     (mf/deref refs/selected-zoom)
-        router   (mf/deref refs/router)
         params   {:page-id page-id :file-id (:id file)}
-        view-url (rt/resolve router :viewer params {:index 0})
 
         go-back
         (mf/use-callback

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

@@ -7,18 +7,18 @@
 (ns app.main.ui.workspace.libraries
   (:require
    [app.common.data :as d]
-   [rumext.alpha :as mf]
+   [app.main.data.modal :as modal]
-   [cuerdas.core :as str]
-   [okulary.core :as l]
-   [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [t tr]]
-   [app.util.data :refer [classnames matches-search]]
-   [app.main.store :as st]
-   [app.main.refs :as refs]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.libraries :as dwl]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
    [app.main.ui.icons :as i]
-   [app.main.data.modal :as modal]))
+   [app.util.data :refer [classnames matches-search]]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [t tr]]
+   [cuerdas.core :as str]
+   [okulary.core :as l]
+   [rumext.alpha :as mf]))
 
 (def workspace-file
   (l/derived :workspace-file st/state))
@@ -68,7 +68,7 @@
 
         on-search-clear
         (mf/use-callback
-         (fn [event]
+         (fn [_]
            (reset! search-term "")))
 
         link-library
@@ -152,8 +152,7 @@
         project      (mf/deref refs/workspace-project)
         file         (mf/deref workspace-file)
         libraries    (->> (mf/deref refs/workspace-libraries)
-                          (d/removem (fn [[key val]]
+                          (d/removem (fn [[_ val]] (:is-indirect val))))
-                                       (:is-indirect val))))
         shared-files (mf/deref refs/workspace-shared-files)
 
         change-tab   #(reset! selected-tab %)

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

@@ -8,14 +8,12 @@
   (:require
    [app.config :as cfg]
    [app.main.refs :as refs]
-   [app.main.store :as st]
-   [app.util.router :as rt]
    [rumext.alpha :as mf]))
 
 ;; --- SESSION WIDGET
 
 (mf/defc session-widget
-  [{:keys [session self? profile] :as props}]
+  [{:keys [session profile] :as props}]
   [:li.tooltip.tooltip-bottom
    {:alt (:fullname profile)}
    [:img {:style {:border-color (:color session)}
@@ -24,15 +22,13 @@
 (mf/defc active-sessions
   {::mf/wrap [mf/memo]}
   []
-  (let [profile  (mf/deref refs/profile)
+  (let [users    (mf/deref refs/users)
-        users    (mf/deref refs/users)
         presence (mf/deref refs/workspace-presence)]
     [:ul.active-users
      (for [session (vals presence)]
        [:& session-widget
         {:session session
          :profile (get users (:profile-id session))
-         :self? (= (:profile-id session) (:id profile))
          :key (:id session)}])]))
 
 

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

@@ -6,10 +6,9 @@
 
 (ns app.main.ui.workspace.rules
   (:require
-   [rumext.alpha :as mf]
    [app.common.math :as mth]
    [app.util.object :as obj]
-   [app.util.timers :as timers]))
+   [rumext.alpha :as mf]))
 
 (defn- calculate-step-size
   [zoom]
@@ -30,7 +29,7 @@
     :else 1))
 
 (defn draw-rule!
-  [dctx {:keys [zoom size start count type] :or {count 200}}]
+  [dctx {:keys [zoom size start type]}]
   (when start
     (let [txfm (- (* (- 0 start) zoom) 20)
           step (calculate-step-size zoom)

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

@@ -6,15 +6,11 @@
 
 (ns app.main.ui.workspace.shapes.bounding-box
   (:require
-   [cuerdas.core :as str]
+   ["randomcolor" :as rdcolor]
-   [rumext.alpha :as mf]
-   [app.util.debug :as debug]
    [app.common.geom.shapes :as gsh]
-   [app.common.geom.matrix :as gmt]
-   [app.common.geom.point :as gpt]
-   [app.util.debug :refer [debug?]]
    [app.main.refs :as refs]
-   ["randomcolor" :as rdcolor]))
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]))
 
 (defn fixed
   [num]
@@ -58,15 +54,11 @@
 (mf/defc bounding-box
   {::mf/wrap-props false}
   [props]
-  (let [shape (-> (unchecked-get props "shape"))
+  (let [shape        (unchecked-get props "shape")
-        frame (unchecked-get props "frame")
         bounding-box (gsh/points->selrect (-> shape :points))
         shape-center (gsh/center-shape shape)
-        line-color (rdcolor #js {:seed (str (:id shape))})
+        line-color   (rdcolor #js {:seed (str (:id shape))})
-        zoom (mf/deref refs/selected-zoom)
+        zoom         (mf/deref refs/selected-zoom)]
-        childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
-        childs     (->> (mf/deref childs-ref)
-                        (map gsh/transform-shape))]
 
     [:g.bounding-box
      [:text {:x (:x bounding-box)

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

@@ -7,7 +7,6 @@
 (ns app.main.ui.workspace.shapes.frame
   (:require
    [app.common.geom.shapes :as gsh]
-   [app.main.refs :as refs]
    [app.main.ui.shapes.frame :as frame]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.text.fontfaces :as ff]
@@ -77,14 +76,10 @@
             objects     (unchecked-get props "objects")
             thumbnail?  (unchecked-get props "thumbnail?")
 
-            edition     (mf/deref refs/selected-edition)
-
             shape       (gsh/transform-shape shape)
             children    (mapv #(get objects %) (:shapes shape))
 
-            ds-modifier (get-in shape [:modifiers :displacement])
+            rendered?   (mf/use-state false)
-
-            rendered? (mf/use-state false)
 
             show-thumbnail? (and thumbnail? (some? (:thumbnail shape)))
 

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

@@ -6,15 +6,12 @@
 
 (ns app.main.ui.workspace.shapes.group
   (:require
-   [app.common.geom.shapes :as gsh]
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.streams :as ms]
-   [app.main.ui.hooks :as hooks]
    [app.main.ui.shapes.group :as group]
    [app.main.ui.shapes.shape :refer [shape-container]]
-   [app.util.debug :refer [debug?]]
    [app.util.dom :as dom]
    [rumext.alpha :as mf]))
 
@@ -33,10 +30,8 @@
       {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
        ::mf/wrap-props false}
       [props]
-      (let [shape (unchecked-get props "shape")
+      (let [shape      (unchecked-get props "shape")
-            frame (unchecked-get props "frame")
+            frame      (unchecked-get props "frame")
-
-            {:keys [id x y width height]} shape
 
             childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape) {:with-modifiers? true}))
             childs     (mf/deref childs-ref)]

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

@@ -6,13 +6,10 @@
 
 (ns app.main.ui.workspace.shapes.path
   (:require
-   [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
-   [app.main.store :as st]
    [app.main.ui.shapes.path :as path]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.workspace.shapes.path.common :as pc]
-   [app.util.dom :as dom]
    [app.util.path.commands :as upc]
    [rumext.alpha :as mf]))
 

frontend/src/app/main/ui/workspace/shapes/path/editor.cljs

@@ -17,10 +17,10 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.workspace.shapes.path.common :as pc]
    [app.util.dom :as dom]
-   [app.util.path.geom :as upg]
+   [app.util.keyboard :as kbd]
    [app.util.path.commands :as upc]
    [app.util.path.format :as upf]
-   [app.util.keyboard :as kbd]
+   [app.util.path.geom :as upg]
    [clojure.set :refer [map-invert]]
    [goog.events :as events]
    [rumext.alpha :as mf])
@@ -31,12 +31,12 @@
 
         on-enter
         (mf/use-callback
-         (fn [event]
+         (fn [_]
            (st/emit! (drp/path-pointer-enter position))))
 
         on-leave
         (mf/use-callback
-         (fn [event]
+         (fn [_]
            (st/emit! (drp/path-pointer-leave position))))
 
         on-mouse-down
@@ -96,11 +96,11 @@
   (when (and point handler)
     (let [{:keys [x y]} handler
           on-enter
-          (fn [event]
+          (fn [_]
             (st/emit! (drp/path-handler-enter index prefix)))
 
           on-leave
-          (fn [event]
+          (fn [_]
             (st/emit! (drp/path-handler-leave index prefix)))
 
           on-mouse-down
@@ -225,7 +225,6 @@
 
         points (into #{} content-points)
 
-        last-command (last content)
         last-p (->> content last upc/command->point)
         handlers (upc/content->handlers content)
 
@@ -247,7 +246,7 @@
                             moving-nodes))
 
         handle-double-click-outside
-        (fn [event]
+        (fn [_]
           (when (= edit-mode :move)
             (st/emit! :interrupt)))]
 
@@ -298,7 +297,7 @@
              last-p? (= last-point (get point->base position))
 
              pos-handlers (->> pos-handlers (filter show-handler?))
-             curve? (not (empty? pos-handlers))]
+             curve? (boolean (seq pos-handlers))]
 
          [:g.path-node
           [:g.point-handlers {:pointer-events (when (= edit-mode :draw) "none")}

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

@@ -7,11 +7,9 @@
 (ns app.main.ui.workspace.shapes.svg-raw
   (:require
    [app.main.refs :as refs]
-   [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.shape :refer [shape-container]]
-   [rumext.alpha :as mf]
+   [app.main.ui.shapes.svg-raw :as svg-raw]
-   [app.common.geom.shapes :as gsh]
+   [rumext.alpha :as mf]))
-   [app.main.ui.context :as muc]))
 
 (defn svg-raw-wrapper-factory
   [shape-wrapper]
@@ -20,20 +18,12 @@
       {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "frame"]))]
        ::mf/wrap-props false}
       [props]
-      (let [shape (unchecked-get props "shape")
+      (let [shape      (unchecked-get props "shape")
-            frame (unchecked-get props "frame")
+            frame      (unchecked-get props "frame")
-
-            {:keys [id x y width height]} shape
 
             childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape)))
-            childs     (mf/deref childs-ref)
+            childs     (mf/deref childs-ref)]
 
-            {:keys [id x y width height]} shape
-            transform (gsh/transform-matrix shape)
-
-            tag (get-in shape [:content :tag])
-
-            def-ctx? (mf/use-ctx muc/def-ctx)]
 
         (if (or (= (get-in shape [:content :tag]) :svg)
                 (and (contains? shape :svg-attrs) (map? (:content shape))))

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

@@ -6,25 +6,20 @@
 
 (ns app.main.ui.workspace.shapes.text
   (:require
-   [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
-   [app.main.data.workspace :as dw]
-   [app.main.data.workspace.common :as dwc]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.context :as muc]
    [app.main.ui.shapes.shape :refer [shape-container]]
    [app.main.ui.shapes.text :as text]
-   [app.main.ui.workspace.shapes.common :as common]
    [app.util.dom :as dom]
    [app.util.logging :as log]
    [app.util.object :as obj]
+   [app.util.text-editor :as ted]
    [app.util.timers :as timers]
    [app.util.webapi :as wapi]
-   [app.util.text-editor :as ted]
-   [okulary.core :as l]
    [beicon.core :as rx]
+   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
 ;; Change this to :info :debug or :trace to debug this module
@@ -50,7 +45,7 @@
 (mf/defc text-resize-content
   {::mf/wrap-props false}
   [props]
-  (let [{:keys [id name x y grow-type] :as shape} (obj/get props "shape")
+  (let [{:keys [id name grow-type] :as shape} (obj/get props "shape")
 
         ;; NOTE: this breaks the hooks rule of "no hooks inside
         ;; conditional code"; but we ensure that this component will
@@ -77,8 +72,8 @@
               #(let [width  (obj/get-in entries [0 "contentRect" "width"])
                      height (obj/get-in entries [0 "contentRect" "height"])]
                  (when (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height)))
-                   (do (log/debug :msg "Resize detected" :shape-id id :width width :height height)
+                   (log/debug :msg "Resize detected" :shape-id id :width width :height height)
-                       (st/emit! (dwt/resize-text id (mth/ceil width) (mth/ceil height))))))))))
+                   (st/emit! (dwt/resize-text id (mth/ceil width) (mth/ceil height)))))))))
 
         text-ref-cb
         (mf/use-callback
@@ -109,7 +104,7 @@
 (mf/defc text-wrapper
   {::mf/wrap-props false}
   [props]
-  (let [{:keys [id x y width height] :as shape} (unchecked-get props "shape")
+  (let [{:keys [id] :as shape} (unchecked-get props "shape")
         edition-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
         edition?    (mf/deref edition-ref)]
 
@@ -124,4 +119,4 @@
       ;; the component if the edition flag changes.
       [:& text-resize-content {:shape shape
                                :edition? edition?
-                               :key (str (:id shape) edition?)}]]]))
+                               :key (str id edition?)}]]]))

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -7,12 +7,9 @@
 (ns app.main.ui.workspace.shapes.text.editor
   (:require
    ["draft-js" :as draft]
-   [app.common.data :as d]
    [app.common.geom.shapes :as gsh]
    [app.common.text :as txt]
    [app.main.data.workspace :as dw]
-   [app.main.data.workspace.common :as dwc]
-   [app.main.data.workspace.selection :as dws]
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -22,9 +19,7 @@
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
    [app.util.text-editor :as ted]
-   [cuerdas.core :as str]
    [goog.events :as events]
-   [okulary.core :as l]
    [rumext.alpha :as mf])
   (:import
    goog.events.EventType))
@@ -34,12 +29,11 @@
 (mf/defc block-component
   {::mf/wrap-props false}
   [props]
-  (let [children (obj/get props "children")
+  (let [bprops (obj/get props "blockProps")
-        bprops   (obj/get props "blockProps")
+        data   (obj/get bprops "data")
-        data     (obj/get bprops "data")
+        style  (sts/generate-paragraph-styles (obj/get bprops "shape")
-        style    (sts/generate-paragraph-styles (obj/get bprops "shape")
                                                 (obj/get bprops "data"))
-        dir      (:text-direction data "auto")]
+        dir    (:text-direction data "auto")]
 
 
     [:div {:style style :dir dir}
@@ -72,10 +66,9 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false
    ::mf/forward-ref true}
-  [props ref]
+  [props _]
-  (let [{:keys [id x y width height grow-type content] :as shape} (obj/get props "shape")
+  (let [{:keys [id content] :as shape} (obj/get props "shape")
 
-        zoom          (mf/deref refs/selected-zoom)
         state-map     (mf/deref refs/workspace-editor-state)
         state         (get state-map id empty-editor-state)
         self-ref      (mf/use-ref)
@@ -86,9 +79,8 @@
         (fn [event]
           (dom/stop-propagation event)
           (when (kbd/esc? event)
-            (do
+            (st/emit! :interrupt)
-              (st/emit! :interrupt)
+            (st/emit! dw/clear-edition-mode)))
-              (st/emit! dw/clear-edition-mode))))
 
         on-mount
         (fn []
@@ -111,7 +103,7 @@
         on-focus
         (mf/use-callback
          (mf/deps shape state)
-         (fn [event]
+         (fn [_]
            (reset! blured false)))
 
         on-change
@@ -131,7 +123,7 @@
 
         handle-return
         (mf/use-callback
-         (fn [event state]
+         (fn [_ state]
            (st/emit! (dwt/update-editor-state shape (ted/editor-split-block state)))
            "handled"))
         ]
@@ -165,7 +157,7 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false
    ::mf/forward-ref true}
-  [props ref]
+  [props _]
   (let [{:keys [id x y width height grow-type] :as shape} (obj/get props "shape")
         clip-id (str "clip-" id)]
     [:g.text-editor {:clip-path (str "url(#" clip-id ")")}

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

@@ -7,22 +7,18 @@
 (ns app.main.ui.workspace.sidebar.assets
   (:require
    [app.common.data :as d]
-   [app.common.spec :as us]
-   [app.common.geom.point :as gpt]
-   [app.common.geom.shapes :as geom]
    [app.common.media :as cm]
    [app.common.pages :as cp]
+   [app.common.spec :as us]
    [app.common.text :as txt]
-   [app.common.uuid :as uuid]
    [app.config :as cfg]
-   [app.main.data.workspace.colors :as dc]
    [app.main.data.modal :as modal]
    [app.main.data.workspace :as dw]
-   [app.main.data.workspace.common :as dwc]
+   [app.main.data.workspace.colors :as dc]
-   [app.main.data.workspace.undo :as dwu]
    [app.main.data.workspace.libraries :as dwl]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
+   [app.main.data.workspace.undo :as dwu]
    [app.main.exports :as exports]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -31,17 +27,15 @@
    [app.main.ui.components.editable-label :refer [editable-label]]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.forms :as fm]
-   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry]]
    [app.util.data :refer [matches-search]]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
-   [app.util.i18n :as i18n :refer [tr t]]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.router :as rt]
-   [app.util.timers :as timers]
    [cljs.spec.alpha :as s]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -133,7 +127,7 @@
         on-accept
         (mf/use-callback
          (mf/deps form)
-         (fn [event]
+         (fn [_]
            (let [asset-name (get-in @form [:clean-data :asset-name])]
              (if create?
                (accept asset-name)
@@ -219,7 +213,7 @@
        content)]))
 
 (mf/defc asset-section-block
-  [{:keys [children role]}]
+  [{:keys [children]}]
   [:* children])
 
 (mf/defc asset-group-title
@@ -352,11 +346,11 @@
 
         selected-components (:components selected-assets)
         multi-components?   (> (count selected-components) 1)
-        multi-assets?       (or (not (empty? (:graphics selected-assets)))
+        multi-assets?       (or (seq (:graphics selected-assets))
-                                (not (empty? (:colors selected-assets)))
+                                (seq (:colors selected-assets))
-                                (not (empty? (:typographies selected-assets))))
+                                (seq (:typographies selected-assets)))
 
-        groups (group-assets components)
+        groups              (group-assets components)
 
         on-duplicate
         (mf/use-callback
@@ -603,9 +597,9 @@
 
         selected-objects    (:graphics selected-assets)
         multi-objects?      (> (count selected-objects) 1)
-        multi-assets?       (or (not (empty? (:components selected-assets)))
+        multi-assets?       (or (seq (:components selected-assets))
-                                (not (empty? (:colors selected-assets)))
+                                (seq (:colors selected-assets))
-                                (not (empty? (:typographies selected-assets))))
+                                (seq (:typographies selected-assets)))
 
         groups (group-assets objects)
 
@@ -776,10 +770,8 @@
 
 (mf/defc color-item
   [{:keys [color local? file-id selected-colors multi-colors? multi-assets?
-           on-asset-click on-assets-delete on-clear-selection on-group
+           on-asset-click on-assets-delete on-clear-selection on-group] :as props}]
-           colors locale] :as props}]
   (let [rename?   (= (:color-for-rename @refs/workspace-local) (:id color))
-        id        (:id color)
         input-ref (mf/use-ref)
         state     (mf/use-state {:editing rename?})
 
@@ -790,8 +782,9 @@
                        (:color color) (:color color)
                        :else (:value color))
 
+        ;; TODO: looks like the first argument is not necessary
         apply-color
-        (fn [color-id event]
+        (fn [_ event]
           (let [ids (wsh/lookup-selected @st/state)]
             (if (kbd/shift? event)
               (st/emit! (dc/change-stroke ids color))
@@ -892,17 +885,17 @@
          {:on-close on-close-menu
           :state @menu-state
           :options [(when-not (or multi-colors? multi-assets?)
-                      [(t locale "workspace.assets.rename") rename-color-clicked])
+                      [(tr "workspace.assets.rename") rename-color-clicked])
                     (when-not (or multi-colors? multi-assets?)
-                      [(t locale "workspace.assets.edit") edit-color-clicked])
+                      [(tr "workspace.assets.edit") edit-color-clicked])
-                    [(t locale "workspace.assets.delete") delete-color]
+                    [(tr "workspace.assets.delete") delete-color]
                     (when-not multi-assets?
                       [(tr "workspace.assets.group") (on-group (:id color))])]}])]))
 
 (mf/defc colors-group
   [{:keys [file-id prefix groups open-groups local? selected-colors
            multi-colors? multi-assets? on-asset-click on-assets-delete
-           on-clear-selection on-group on-rename-group on-ungroup colors locale]}]
+           on-clear-selection on-group on-rename-group on-ungroup colors]}]
   (let [group-open? (get open-groups prefix true)]
 
     [:*
@@ -932,8 +925,7 @@
                                :on-assets-delete on-assets-delete
                                :on-clear-selection on-clear-selection
                                :on-group on-group
-                               :colors colors
+                               :colors colors}]))])
-                               :locale locale}]))])
         (for [[path-item content] groups]
           (when-not (empty? path-item)
             [:& colors-group {:file-id file-id
@@ -950,24 +942,23 @@
                               :on-group on-group
                               :on-rename-group on-rename-group
                               :on-ungroup on-ungroup
-                              :colors colors
+                              :colors colors}]))])]))
-                              :locale locale}]))])]))
 
 (mf/defc colors-box
-  [{:keys [file-id local? colors locale open? open-groups selected-assets
+  [{:keys [file-id local? colors open? open-groups selected-assets
            on-asset-click on-assets-delete on-clear-selection] :as props}]
   (let [selected-colors     (:colors selected-assets)
         multi-colors?       (> (count selected-colors) 1)
-        multi-assets?       (or (not (empty? (:components selected-assets)))
+        multi-assets?       (or (seq (:components selected-assets))
-                                (not (empty? (:graphics selected-assets)))
+                                (seq (:graphics selected-assets))
-                                (not (empty? (:typographies selected-assets))))
+                                (seq (:typographies selected-assets)))
 
-        groups        (group-assets colors)
+        groups              (group-assets colors)
 
         add-color
         (mf/use-callback
          (mf/deps file-id)
-         (fn [value opacity]
+         (fn [value _opacity]
            (st/emit! (dwl/add-color value))))
 
         add-color-clicked
@@ -1072,8 +1063,7 @@
                           :on-group on-group
                           :on-rename-group on-rename-group
                           :on-ungroup on-ungroup
-                          :colors colors
+                          :colors colors}]]]))
-                          :locale locale}]]]))
 
 ;; ---- Typography box ----
 
@@ -1127,7 +1117,7 @@
                                     :on-context-menu on-context-menu}]))])]))
 
 (mf/defc typographies-box
-  [{:keys [file file-id local? typographies locale open? open-groups selected-assets
+  [{:keys [file file-id local? typographies open? open-groups selected-assets
            on-asset-click on-assets-delete on-clear-selection] :as props}]
   (let [state (mf/use-state {:detail-open? false
                              :id nil})
@@ -1140,14 +1130,14 @@
 
         selected-typographies (:typographies selected-assets)
         multi-typographies?   (> (count selected-typographies) 1)
-        multi-assets?         (or (not (empty? (:components selected-assets)))
+        multi-assets?         (or (seq (:components selected-assets))
-                                  (not (empty? (:graphics selected-assets)))
+                                  (seq (:graphics selected-assets))
-                                  (not (empty? (:colors selected-assets))))
+                                  (seq (:colors selected-assets)))
 
         add-typography
         (mf/use-callback
          (mf/deps file-id)
-         (fn [value opacity]
+         (fn [_]
            (st/emit! (dwl/add-typography txt/default-typography))))
 
         handle-change
@@ -1157,7 +1147,7 @@
            (st/emit! (dwl/update-typography (merge typography changes) file-id))))
 
         apply-typography
-        (fn [typography event]
+        (fn [typography _event]
           (let [ids (wsh/lookup-selected @st/state)
                 attrs (merge
                         {:typography-ref-file file-id
@@ -1243,11 +1233,6 @@
           (fn []
             (swap! menu-state close-auto-pos-menu)))
 
-        closed-typography-edit
-        (mf/use-callback
-         (mf/deps file-id)
-         (fn [event] ))
-
         handle-rename-typography-clicked
         (fn []
           (st/emit! #(assoc-in % [:workspace-local :rename-typography] (:id @state))))
@@ -1307,10 +1292,10 @@
            {:on-close on-close-menu
             :state @menu-state
             :options [(when-not (or multi-typographies? multi-assets?)
-                        [(t locale "workspace.assets.rename") handle-rename-typography-clicked])
+                        [(tr "workspace.assets.rename") handle-rename-typography-clicked])
                       (when-not (or multi-typographies? multi-assets?)
-                        [(t locale "workspace.assets.edit") handle-edit-typography-clicked])
+                        [(tr "workspace.assets.edit") handle-edit-typography-clicked])
-                      [(t locale "workspace.assets.delete") handle-delete-typography]
+                      [(tr "workspace.assets.delete") handle-delete-typography]
                       (when-not multi-assets?
                         [(tr "workspace.assets.group") on-group])]}])]]))
 
@@ -1322,7 +1307,7 @@
   (l/derived (fn [state]
                (let [wfile (:workspace-data state)]
                  (if (= (:id wfile) id)
-                   (vals (get-in wfile [:colors]))
+                   (vals (get wfile :colors))
                    (vals (get-in state [:workspace-libraries id :data :colors])))))
              st/state =))
 
@@ -1331,7 +1316,7 @@
   (l/derived (fn [state]
                (let [wfile (:workspace-data state)]
                  (if (= (:id wfile) id)
-                   (vals (get-in wfile [:media]))
+                   (vals (get wfile :media))
                    (vals (get-in state [:workspace-libraries id :data :media])))))
              st/state =))
 
@@ -1340,7 +1325,7 @@
   (l/derived (fn [state]
                (let [wfile (:workspace-data state)]
                  (if (= (:id wfile) id)
-                   (vals (get-in wfile [:components]))
+                   (vals (get wfile :components))
                    (vals (get-in state [:workspace-libraries id :data :components])))))
              st/state =))
 
@@ -1349,7 +1334,7 @@
   (l/derived (fn [state]
                (let [wfile (:workspace-data state)]
                  (if (= (:id wfile) id)
-                   (vals (get-in wfile [:typographies]))
+                   (vals (get wfile :typographies))
                    (vals (get-in state [:workspace-libraries id :data :typographies])))))
              st/state =))
 
@@ -1374,7 +1359,7 @@
                   comp-fn))))
 
 (mf/defc file-library
-  [{:keys [file local? default-open? filters locale] :as props}]
+  [{:keys [file local? default-open? filters] :as props}]
   (let [open-file       (mf/deref (open-file-ref (:id file)))
         open?           (-> open-file
                             :library
@@ -1425,23 +1410,23 @@
 
         toggle-sort
         (mf/use-callback
-          (fn [event]
+         (fn [_]
-            (swap! reverse-sort? not)))
+           (swap! reverse-sort? not)))
 
         toggle-listing
         (mf/use-callback
-          (fn [event]
+         (fn [_]
-            (swap! listing-thumbs? not)))
+           (swap! listing-thumbs? not)))
 
         toggle-selected-asset
         (mf/use-callback
-          (mf/deps @selected-assets)
+         (mf/deps @selected-assets)
-          (fn [asset-type asset-id]
+         (fn [asset-type asset-id]
-            (swap! selected-assets update asset-type
+           (swap! selected-assets update asset-type
-                   (fn [selected]
+                  (fn [selected]
-                     (if (contains? selected asset-id)
+                    (if (contains? selected asset-id)
-                       (disj selected asset-id)
+                      (disj selected asset-id)
-                       (conj selected asset-id))))))
+                      (conj selected asset-id))))))
 
         extend-selected-assets
         (mf/use-callback
@@ -1453,7 +1438,7 @@
                         (get groups "" [])
                         (reduce concat
                                 []
-                                (->> (filter #(not (empty? (first %))) groups)
+                                (->> (filter #(seq (first %)) groups)
                                      (map second)
                                      (map flatten-groups)))))]
               (swap! selected-assets update asset-type
@@ -1504,17 +1489,16 @@
         (mf/use-callback
           (mf/deps @selected-assets)
           (fn []
-            (do
+            (st/emit! (dwu/start-undo-transaction))
-              (st/emit! (dwu/start-undo-transaction))
+            (apply st/emit! (map #(dwl/delete-component {:id %})
-              (apply st/emit! (map #(dwl/delete-component {:id %})
+                                 (:components @selected-assets)))
-                                   (:components @selected-assets)))
+            (apply st/emit! (map #(dwl/delete-media {:id %})
-              (apply st/emit! (map #(dwl/delete-media {:id %})
+                                 (:graphics @selected-assets)))
-                                   (:graphics @selected-assets)))
+            (apply st/emit! (map #(dwl/delete-color {:id %})
-              (apply st/emit! (map #(dwl/delete-color {:id %})
+                                 (:colors @selected-assets)))
-                                   (:colors @selected-assets)))
+            (apply st/emit! (map #(dwl/delete-typography %)
-              (apply st/emit! (map #(dwl/delete-typography %)
+                                 (:typographies @selected-assets)))
-                                   (:typographies @selected-assets)))
+            (st/emit! (dwu/commit-undo-transaction))))]
-              (st/emit! (dwu/commit-undo-transaction)))))]
 
     [:div.tool-window {:on-context-menu #(dom/prevent-default %)
                        :on-click unselect-all}
@@ -1526,9 +1510,9 @@
 
       (if local?
         [:*
-          [:span (t locale "workspace.assets.file-library")]
+          [:span (tr "workspace.assets.file-library")]
           (when shared?
-            [:span.tool-badge (t locale "workspace.assets.shared")])]
+            [:span.tool-badge (tr "workspace.assets.shared")])]
         [:*
           [:span (:name file)]
           [:span.tool-link.tooltip.tooltip-left {:alt "Open library file"}
@@ -1594,7 +1578,6 @@
           (when show-colors?
             [:& colors-box {:file-id (:id file)
                             :local? local?
-                            :locale locale
                             :colors colors
                             :open? (open-box? :colors)
                             :open-groups (open-groups :colors)
@@ -1607,7 +1590,6 @@
             [:& typographies-box {:file file
                                   :file-id (:id file)
                                   :local? local?
-                                  :locale locale
                                   :typographies typographies
                                   :open? (open-box? :typographies)
                                   :open-groups (open-groups :typographies)
@@ -1618,7 +1600,7 @@
 
           (when (and (not show-components?) (not show-graphics?) (not show-colors?))
             [:div.asset-section
-             [:div.asset-title (t locale "workspace.assets.not-found")]])]))]))
+             [:div.asset-title (tr "workspace.assets.not-found")]])]))]))
 
 
 (mf/defc assets-toolbox
@@ -1627,7 +1609,6 @@
                        (vals)
                        (remove :is-indirect))
         file      (mf/deref refs/workspace-file)
-        locale    (mf/deref i18n/locale)
         team-id   (mf/use-ctx ctx/current-team-id)
         filters   (mf/use-state {:term "" :box :all})
 
@@ -1641,7 +1622,7 @@
         on-search-clear-click
         (mf/use-callback
          (mf/deps team-id)
-         (fn [event]
+         (fn [_]
            (swap! filters assoc :term "")))
 
         on-box-filter-change
@@ -1657,10 +1638,10 @@
      [:div.tool-window
        [:div.tool-window-content
         [:div.assets-bar-title
-         (t locale "workspace.assets.assets")
+         (tr "workspace.assets.assets")
          [:div.libraries-button {:on-click #(modal/show! :libraries-dialog {})}
           i/text-align-justify
-          (t locale "workspace.assets.libraries")]]
+          (tr "workspace.assets.libraries")]]
 
         [:div.search-block
           [:input.search-input
@@ -1677,16 +1658,15 @@
 
         [:select.input-select {:value (:box @filters)
                                :on-change on-box-filter-change}
-         [:option {:value ":all"} (t locale "workspace.assets.box-filter-all")]
+         [:option {:value ":all"} (tr "workspace.assets.box-filter-all")]
-         [:option {:value ":components"} (t locale "workspace.assets.components")]
+         [:option {:value ":components"} (tr "workspace.assets.components")]
-         [:option {:value ":graphics"} (t locale "workspace.assets.graphics")]
+         [:option {:value ":graphics"} (tr "workspace.assets.graphics")]
-         [:option {:value ":colors"} (t locale "workspace.assets.colors")]
+         [:option {:value ":colors"} (tr "workspace.assets.colors")]
-         [:option {:value ":typographies"} (t locale "workspace.assets.typography")]]]]
+         [:option {:value ":typographies"} (tr "workspace.assets.typography")]]]]
 
      [:div.libraries-wrapper
       [:& file-library
        {:file file
-        :locale locale
         :local? true
         :default-open? true
         :filters @filters}]
@@ -1697,7 +1677,6 @@
          {:key (:id file)
           :file file
           :local? false
-          :locale locale
           :default-open? false
           :filters @filters}])]]))
 

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

@@ -6,20 +6,15 @@
 
 (ns app.main.ui.workspace.sidebar.history
   (:require
-   [rumext.alpha :as mf]
-   [cuerdas.core :as str]
    [app.common.data :as d]
-   [app.main.ui.icons :as i]
-   [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.util.data :refer [read-string]]
+   [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [t] :as i18n]
-   [app.util.router :as r]
+   [cuerdas.core :as str]
-   [app.util.time :as dt]
    [okulary.core :as l]
-   [app.main.store :as st]))
+   [rumext.alpha :as mf]))
 
 (def workspace-undo
   (l/derived :workspace-undo st/state))
@@ -136,7 +131,7 @@
     i/layers))
 
 (defn is-shape? [type]
-  #{:shape :rect :circle :text :path :frame :group})
+  (contains? #{:shape :rect :circle :text :path :frame :group} type))
 
 (defn parse-entry [{:keys [redo-changes]}]
   (->> redo-changes
@@ -210,7 +205,7 @@
           :modify (->> candidates
                        (filter #(= :modify (:operation %)))
                        (group-by :id)
-                       (d/mapm (fn [k v] (->> v
+                       (d/mapm (fn [_ v] (->> v
                                               (mapcat :detail)
                                               (map (comp safe-name :attr))
                                               (remove nil?)
@@ -279,7 +274,7 @@
 (mf/defc history-toolbox []
   (let [locale (mf/deref i18n/locale)
         objects (mf/deref refs/workspace-page-objects)
-        {:keys [items index transaction]} (mf/deref workspace-undo)
+        {:keys [items index]} (mf/deref workspace-undo)
         entries (parse-entries items objects)]
     [:div.history-toolbox
      [:div.history-toolbox-title (t locale "workspace.undo.title")]

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

@@ -16,12 +16,9 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [t]]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
-   [app.util.perf :as perf]
    [app.util.timers :as ts]
-   [beicon.core :as rx]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
 
@@ -175,7 +172,7 @@
             (st/emit! (dw/select-shape id))))
 
         on-drop
-        (fn [side {:keys [id] :as data}]
+        (fn [side _data]
           (if (= side :center)
             (st/emit! (dw/relocate-selected-shapes (:id item) 0))
             (let [to-index  (if (= side :top) (inc index) index)

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

@@ -6,13 +6,11 @@
 
 (ns app.main.ui.workspace.sidebar.options
   (:require
-   [app.common.spec :as us]
    [app.main.data.workspace :as udw]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.align :refer [align-options]]
    [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-menu]]
    [app.main.ui.workspace.sidebar.options.menus.interactions :refer [interactions-menu]]
@@ -26,9 +24,8 @@
    [app.main.ui.workspace.sidebar.options.shapes.rect :as rect]
    [app.main.ui.workspace.sidebar.options.shapes.svg-raw :as svg-raw]
    [app.main.ui.workspace.sidebar.options.shapes.text :as text]
-   [app.util.i18n :as i18n :refer [tr t]]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
-   [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
 ;; --- Options
@@ -52,32 +49,30 @@
      :page-id page-id
      :file-id file-id}]])
 
-
 (mf/defc options-content
   {::mf/wrap [mf/memo]}
   [{:keys [selected section shapes shapes-with-children page-id file-id]}]
-  (let [locale (mf/deref i18n/locale)]
+  [:div.tool-window
-    [:div.tool-window
+   [:div.tool-window-content
-     [:div.tool-window-content
+    [:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
-      [:& tab-container {:on-change-tab #(st/emit! (udw/set-options-mode %))
+                       :selected section}
-                         :selected section}
+     [:& tab-element {:id :design
-       [:& tab-element {:id :design
+                      :title (tr "workspace.options.design")}
-                        :title (t locale "workspace.options.design")}
+      [:div.element-options
-        [:div.element-options
+       [:& align-options]
-         [:& align-options]
+       (case (count selected)
-         (case (count selected)
+         0 [:& page/options]
-           0 [:& page/options]
+         1 [:& shape-options {:shape (first shapes)
-           1 [:& shape-options {:shape (first shapes)
+                              :page-id page-id
-                                :page-id page-id
+                              :file-id file-id
-                                :file-id file-id
+                              :shapes-with-children shapes-with-children}]
-                                :shapes-with-children shapes-with-children}]
+         [:& multiple/options {:shapes-with-children shapes-with-children
-           [:& multiple/options {:shapes-with-children shapes-with-children
+                               :shapes shapes}])]]
-                                 :shapes shapes}])]]
 
-       [:& tab-element {:id :prototype
+     [:& tab-element {:id :prototype
-                        :title (t locale "workspace.options.prototype")}
+                      :title (tr "workspace.options.prototype")}
-        [:div.element-options
+      [:div.element-options
-         [:& interactions-menu {:shape (first shapes)}]]]]]]))
+       [:& interactions-menu {:shape (first shapes)}]]]]]])
 
 
 ;; TODO: this need optimizations, selected-objects and