✨ Highlight elements on hover in grid editor panel

frontend/src/app/main/data/workspace/shape_layout.cljs

@@ -311,11 +311,13 @@
     (update [_ state]
       (let [objects (wsh/lookup-page-objects state)
             shape (get objects (first ids))
-            highlighted (when hover?
-                          (->> (if (= type :row)
-                                 (ctl/shapes-by-row shape index)
-                                 (ctl/shapes-by-column shape index))
-                               (set)))]
+
+            highlighted
+            (when hover?
+              (->> (if (= type :row)
+                     (ctl/shapes-by-row shape index)
+                     (ctl/shapes-by-column shape index))
+                   (set)))]
         (cond-> state
           hover?
           (update-in [:workspace-grid-edition (first ids) :hover-track] (fnil conj #{}) [type index])

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

@@ -53,6 +53,7 @@
 
         selected?         (contains? selected id)
         highlighted?      (contains? highlighted id)
+
         container?        (or (cfh/frame-shape? item)
                               (cfh/group-shape? item))
         absolute?         (ctl/layout-absolute? item)
@@ -229,6 +230,7 @@
               :id id
               :class (stl/css-case
                       :layer-row true
+                      :highlight highlighted?
                       :component (some? (:component-id item))
                       :masked (:masked-group item)
                       :selected selected?
@@ -329,6 +331,7 @@
             (when-let [item (get objects id)]
               [:& layer-item
                {:item item
+                :highlighted highlighted
                 :selected selected
                 :index index
                 :objects objects

frontend/src/app/main/ui/workspace/sidebar/layer_item.scss

@@ -139,6 +139,7 @@
       }
     }
   }
+  &.highlight,
   &:hover {
     --context-hover-color: var(--layer-row-foreground-color-hover);
     --context-hover-opacity: $op-10;
@@ -238,12 +239,14 @@
     .element-children {
       background-color: transparent;
       color: var(--layer-row-foreground-color-selected);
-      &:hover {
-        background-color: var(--layer-row-background-color-selected);
-      }
     }
+    &.highlight,
     &:hover {
       background-color: var(--layer-row-background-color-selected);
+
+      .element-children {
+        background-color: var(--layer-row-background-color-selected);
+      }
     }
   }
   &.type-comp {
@@ -295,6 +298,7 @@
           }
         }
       }
+      &.highlight,
       &:hover {
         .element-list-body {
           .button-content {
@@ -376,6 +380,7 @@
           }
         }
       }
+      &.highlight,
       &:hover {
         .element-list-body {
           .button-content {
@@ -404,6 +409,7 @@
         }
       }
     }
+    &.highlight,
     &:hover {
       .element-list-body {
         .button-content {
@@ -437,6 +443,8 @@
 }
 .parent-selected .layer-row {
   background-color: var(--layer-child-row-background-color);
+
+  &.highlight,
   &:hover {
     background-color: var(--layer-row-background-color-hover);
     &.hidden {
@@ -478,6 +486,7 @@
     .element-children :global(.layer-row) {
       background-color: transparent;
       color: var(--layer-row-foreground-color-hover);
+      &.highlight,
       &:hover {
         background-color: var(--layer-row-background-color-hover);
       }

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss

@@ -224,7 +224,7 @@
   .track-info-dir-icon {
     border-radius: $br-8 0 0 $br-8;
     background-color: var(--input-background-color);
-    padding-left: $s-12;
+    padding: 0 $s-8;
 
     svg {
       @extend .button-icon;