♻️ Cleanup

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

@@ -19,7 +19,9 @@
    [app.main.store :as st]
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.controls.input :refer [input*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.notifications.badge :refer [badge-notification]]
@@ -121,30 +123,28 @@
      [:> hooks/sortable-container* {}
       (for [obj shapes]
         (if (cfh/frame-shape? obj)
-          [:> frame-wrapper*
-           {:item obj
-            :rename-id rename-id
-            :selected selected
-            :highlighted highlighted
-            :index (unchecked-get obj "__$__counter")
-            :objects objects
-            :key (dm/str (get obj :id))
-            :is-sortable true
-            :is-filtered is-filtered
-            :parent-size parent-size
-            :depth -1}]
-          [:> layer-item*
-           {:item obj
-            :rename-id rename-id
-            :selected selected
-            :highlighted highlighted
-            :index (unchecked-get obj "__$__counter")
-            :objects objects
-            :key (dm/str (get obj :id))
-            :is-sortable true
-            :is-filtered is-filtered
-            :depth -1
-            :parent-size parent-size}]))]]))
+          [:> frame-wrapper* {:item obj
+                              :rename-id rename-id
+                              :selected selected
+                              :highlighted highlighted
+                              :index (unchecked-get obj "__$__counter")
+                              :objects objects
+                              :key (dm/str (get obj :id))
+                              :is-sortable true
+                              :is-filtered is-filtered
+                              :parent-size parent-size
+                              :depth -1}]
+          [:> layer-item* {:item obj
+                           :rename-id rename-id
+                           :selected selected
+                           :highlighted highlighted
+                           :index (unchecked-get obj "__$__counter")
+                           :objects objects
+                           :key (dm/str (get obj :id))
+                           :is-sortable true
+                           :is-filtered is-filtered
+                           :depth -1
+                           :parent-size parent-size}]))]]))
 
 (mf/defc layers-tree-wrapper*
   {::mf/private true}
@@ -182,17 +182,16 @@
     [:ul {:class (stl/css :element-list)}
      (for [[index id] (d/enumerate (:shapes root))]
        (when-let [obj (get objects id)]
-         [:> layer-item*
-          {:item obj
-           :selected selected
-           :highlighted highlighted
-           :index index
-           :objects objects
-           :key id
-           :is-sortable false
-           :is-filtered true
-           :depth -1
-           :parent-size parent-size}]))]))
+         [:> layer-item* {:item obj
+                          :selected selected
+                          :highlighted highlighted
+                          :index index
+                          :objects objects
+                          :key id
+                          :is-sortable false
+                          :is-filtered true
+                          :depth -1
+                          :parent-size parent-size}]))]))
 
 (defn calc-reparented-objects
   [objects]
@@ -275,7 +274,8 @@
          #(swap! state* assoc :search-text "" :num-items 100 :current-match-idx 0))
 
         toggle-filters
-        (mf/use-fn #(swap! state* update :show-menu not))
+        (mf/use-fn
+         #(swap! state* update :show-menu not))
 
         on-toggle-filters-click
         (mf/use-fn
@@ -284,21 +284,24 @@
            (toggle-filters)))
 
         hide-menu
-        (mf/use-fn #(swap! state* assoc :show-menu false))
+        (mf/use-fn
+         #(swap! state* assoc :show-menu false))
 
         on-key-down
-        (mf/use-fn (fn [event] (when (kbd/esc? event) (hide-menu))))
+        (mf/use-fn
+         (fn [event]
+           (when (kbd/esc? event) (hide-menu))))
 
         update-search-text
         (mf/use-fn
-         (fn [value _event]
+         (fn [value]
            (swap! state* assoc :search-text value :num-items 100 :current-match-idx 0)))
 
         update-replace-text
-        (mf/use-fn (fn [value _event] (swap! state* assoc :replace-text value)))
-
-        clear-replace-text
-        (mf/use-fn #(swap! state* assoc :replace-text ""))
+        (mf/use-fn
+         (fn [event]
+           (let [value (dom/get-target-val event)]
+             (swap! state* assoc :replace-text value))))
 
         f-key? (kbd/is-key-ignore-case? "f")
         h-key? (kbd/is-key-ignore-case? "h")
@@ -346,15 +349,20 @@
         remove-filter
         (mf/use-fn
          (fn [event]
-           (let [fkey (-> (dom/get-current-target event) (dom/get-data "filter") (keyword))]
+           (let [fkey (-> (dom/get-current-target event)
+                          (dom/get-data "filter")
+                          (keyword))]
              (swap! state* (fn [state]
-                             (-> state (update :filters disj fkey) (assoc :num-items 100)))))))
+                             (-> state
+                                 (update :filters disj fkey)
+                                 (assoc :num-items 100)))))))
 
         add-filter
         (mf/use-fn
          (fn [event]
            (dom/stop-propagation event)
-           (let [key (-> (dom/get-current-target event) (dom/get-data "filter") (keyword))]
+           (let [key (-> (dom/get-current-target event)
+                         (dom/get-data "filter") (keyword))]
              (swap! state* (fn [state]
                              (-> state
                                  (update :filters conj key)
@@ -516,16 +524,20 @@
      #(mf/html
        (if show-search?
          [:*
-          [:div {:class (stl/css :tool-window-bar :search)}
+          [:div {:class (stl/css :tool-window-bar)}
            [:> search-bar* {:input-ref search-input-ref
+                            :class (stl/css :search-item)
                             :on-change update-search-text
                             :value current-search
                             :on-clear clear-search-text
                             :on-key-down handle-find-shortcut-keydown
                             :placeholder (tr "workspace.sidebar.layers.search")}
-            [:button {:on-click on-toggle-filters-click
-                      :class (stl/css-case :filter-button true :opened show-menu? :active active?)}
-             [:> icon* {:icon-id i/filter}]]]
+            [:> icon-button* {:variant "secondary"
+                              :class (stl/css :filter-button)
+                              :aria-pressed show-menu?
+                              :aria-label "aaa" ;; TODO cambiar texto
+                              :on-click on-toggle-filters-click
+                              :icon i/filter}]]
            [:> icon-button* {:variant "ghost"
                              :aria-pressed find-replace-mode?
                              :aria-label (tr "workspace.sidebar.layers.search-and-replace")
@@ -536,35 +548,14 @@
                              :on-click toggle-search
                              :icon i/close}]]
 
-          [:div {:class (stl/css :search-scope-row)}
-           [:label {:class (stl/css-case :scope-option true :scope-selected (= :layers search-scope))}
-            [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :layers search-scope))}]
-            [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input)
-                     :checked (= :layers search-scope)
-                     :on-change (fn [_] (set-search-scope :layers))}]
-            [:span {:class (stl/css :scope-label)}
-             (tr "workspace.sidebar.layers.search-scope-layers")]]
-           [:label {:class (stl/css-case :scope-option true :scope-selected (= :canvas search-scope))}
-            [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :canvas search-scope))}]
-            [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input)
-                     :checked (= :canvas search-scope)
-                     :on-change (fn [_] (set-search-scope :canvas))}]
-            [:span {:class (stl/css :scope-label)}
-             (tr "workspace.sidebar.layers.search-scope-canvas")]]]
+          [:div {:class (stl/css :wrapper)}
+           (when ^boolean find-replace-mode?
+             [:div {:class (stl/css :replace-row)}
+              [:> input* {:type "text"
+                          :placeholder (tr "workspace.sidebar.layers.replace-placeholder")
+                          :on-key-down handle-find-shortcut-keydown
+                          :on-change update-replace-text}]
 
-          (when ^boolean find-replace-mode?
-            [:*
-             [:div {:class (stl/css :tool-window-bar :replace-row)}
-              [:div {:class (stl/css :replace-input-wrapper)}
-               [:input {:class (stl/css :replace-input)
-                        :value replace-text
-                        :placeholder (tr "workspace.sidebar.layers.replace-placeholder")
-                        :on-change (fn [event]
-                                     (update-replace-text (dom/get-target-val event) event))
-                        :on-key-down handle-find-shortcut-keydown}]
-               (when (not= "" replace-text)
-                 [:button {:class (stl/css :clear-icon) :on-click clear-replace-text}
-                  [:> icon* {:icon-id i/delete-text :size "s"}]])]
               (when (d/not-empty? current-search)
                 (if (pos? text-match-count)
                   [:div {:class (stl/css :match-navigation)}
@@ -574,131 +565,147 @@
                                      :on-click navigate-prev :icon i/arrow-up}]
                    [:> icon-button* {:variant "ghost" :aria-label (tr "labels.next")
                                      :on-click navigate-next :icon i/arrow-down}]]
-                  [:span {:class (stl/css :no-matches)}
-                   (tr "workspace.sidebar.layers.no-matches")]))]
+                  [:div {:class (stl/css :no-matches)}
+                   [:span (tr "workspace.sidebar.layers.no-matches")]]))])
+
+           [:div {:class (stl/css :search-scope-row)}
+            [:label {:class (stl/css-case :scope-option true :scope-selected (= :layers search-scope))}
+             [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :layers search-scope))}]
+             [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input)
+                      :checked (= :layers search-scope)
+                      :on-change (fn [_] (set-search-scope :layers))}]
+             [:span {:class (stl/css :scope-label)}
+              (tr "workspace.sidebar.layers.search-scope-layers")]]
+            [:label {:class (stl/css-case :scope-option true :scope-selected (= :canvas search-scope))}
+             [:span {:class (stl/css-case :scope-radio true :scope-radio-checked (= :canvas search-scope))}]
+             [:input {:type "radio" :name "search-scope" :class (stl/css :scope-radio-input)
+                      :checked (= :canvas search-scope)
+                      :on-change (fn [_] (set-search-scope :canvas))}]
+             [:span {:class (stl/css :scope-label)}
+              (tr "workspace.sidebar.layers.search-scope-canvas")]]]
+
+           (when ^boolean find-replace-mode?
              [:div {:class (stl/css :replace-actions-row)}
-              [:button {:type "button"
-                        :class (stl/css :replace-button)
-                        :on-click handle-replace
-                        :on-key-down on-replace-keydown
-                        :disabled (or (zero? text-match-count) (str/empty? current-search))}
+              [:> button* {:variant "secondary"
+                           :on-click handle-replace
+                           :on-key-down on-replace-keydown
+                           :disabled (or (zero? text-match-count) (str/empty? current-search))}
                (tr "workspace.sidebar.layers.replace")]
-              [:button {:type "button"
-                        :class (stl/css :replace-button)
-                        :on-click handle-replace-all
-                        :on-key-down on-replace-all-keydown
-                        :disabled (or (zero? text-match-count) (str/empty? current-search))}
-               (tr "workspace.sidebar.layers.replace-all")]]])
+              [:> button* {:variant "secondary"
+                           :on-click handle-replace-all
+                           :on-key-down on-replace-all-keydown
+                           :disabled (or (zero? text-match-count) (str/empty? current-search))}
+               (tr "workspace.sidebar.layers.replace-all")]])
 
-          [:div {:class (stl/css :active-filters)}
-           (for [fkey current-filters]
-             (let [fname (d/name fkey)
+           [:div {:class (stl/css :active-filters)}
+            (for [fkey current-filters]
+              (let [fname (d/name fkey)
 
-                   name  (case fkey
-                           :frame     (tr "workspace.sidebar.layers.frames")
-                           :group     (tr "workspace.sidebar.layers.groups")
-                           :mask      (tr "workspace.sidebar.layers.masks")
-                           :component (tr "workspace.sidebar.layers.components")
-                           :text      (tr "workspace.sidebar.layers.texts")
-                           :image     (tr "workspace.sidebar.layers.images")
-                           :shape     (tr "workspace.sidebar.layers.shapes")
-                           (tr fkey))
-                   filter-icon (usi/get-shape-icon-by-type fkey)]
+                    name  (case fkey
+                            :frame     (tr "workspace.sidebar.layers.frames")
+                            :group     (tr "workspace.sidebar.layers.groups")
+                            :mask      (tr "workspace.sidebar.layers.masks")
+                            :component (tr "workspace.sidebar.layers.components")
+                            :text      (tr "workspace.sidebar.layers.texts")
+                            :image     (tr "workspace.sidebar.layers.images")
+                            :shape     (tr "workspace.sidebar.layers.shapes")
+                            (tr fkey))
+                    filter-icon (usi/get-shape-icon-by-type fkey)]
 
-               [:button {:class (stl/css :layer-filter)
-                         :key fname
-                         :data-filter fname
-                         :on-click remove-filter}
-                [:> icon* {:icon-id filter-icon :size "s" :class (stl/css :layer-filter-icon)}]
-                [:span {:class (stl/css :layer-filter-name)}
-                 name]
-                [:> icon* {:icon-id i/close-small :class (stl/css :layer-filter-close)}]]))]
+                [:button {:class (stl/css :layer-filter)
+                          :key fname
+                          :data-filter fname
+                          :on-click remove-filter}
+                 [:> icon* {:icon-id filter-icon :size "s" :class (stl/css :layer-filter-icon)}]
+                 [:span {:class (stl/css :layer-filter-name)}
+                  name]
+                 [:> icon* {:icon-id i/close-small :class (stl/css :layer-filter-close)}]]))]
 
-          (when ^boolean show-menu?
-            [:ul {:class (stl/css :filters-container)}
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :frame))
-                   :data-filter "frame"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/board :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.frames")]]
+           (when ^boolean show-menu?
+             [:ul {:class (stl/css :filters-container)}
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :frame))
+                    :data-filter "frame"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/board :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.frames")]]
 
-              (when (contains? current-filters :frame)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
+               (when (contains? current-filters :frame)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
 
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :group))
-                   :data-filter "group"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/group :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.groups")]]
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :group))
+                    :data-filter "group"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/group :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.groups")]]
 
-              (when (contains? current-filters :group)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
+               (when (contains? current-filters :group)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
 
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :mask))
-                   :data-filter "mask"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/mask :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.masks")]]
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :mask))
+                    :data-filter "mask"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/mask :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.masks")]]
 
-              (when (contains? current-filters :mask)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
+               (when (contains? current-filters :mask)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
 
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :component))
-                   :data-filter "component"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/component :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.components")]]
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :component))
+                    :data-filter "component"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/component :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.components")]]
 
-              (when (contains? current-filters :component)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
+               (when (contains? current-filters :component)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
 
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :text))
-                   :data-filter "text"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/text :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.texts")]]
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :text))
+                    :data-filter "text"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/text :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.texts")]]
 
-              (when (contains? current-filters :text)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
+               (when (contains? current-filters :text)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
 
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :image))
-                   :data-filter "image"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/img :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.images")]]
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :image))
+                    :data-filter "image"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/img :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.images")]]
 
-              (when (contains? current-filters :image)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
+               (when (contains? current-filters :image)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]
 
-             [:li {:class (stl/css-case :filter-menu-item true
-                                        :selected (contains? current-filters :shape))
-                   :data-filter "shape"
-                   :on-click add-filter}
-              [:div {:class (stl/css :filter-menu-item-name-wrapper)}
-               [:> icon* {:icon-id i/path :size "s" :class (stl/css :filter-menu-item-icon)}]
-               [:span {:class (stl/css :filter-menu-item-name)}
-                (tr "workspace.sidebar.layers.shapes")]]
+              [:li {:class (stl/css-case :filter-menu-item true
+                                         :selected (contains? current-filters :shape))
+                    :data-filter "shape"
+                    :on-click add-filter}
+               [:div {:class (stl/css :filter-menu-item-name-wrapper)}
+                [:> icon* {:icon-id i/path :size "s" :class (stl/css :filter-menu-item-icon)}]
+                [:span {:class (stl/css :filter-menu-item-name)}
+                 (tr "workspace.sidebar.layers.shapes")]]
 
-              (when (contains? current-filters :shape)
-                [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]])]
+               (when (contains? current-filters :shape)
+                 [:> icon* {:icon-id i/tick :size "s" :class (stl/css :filter-menu-item-tick)}])]])]]
 
          [:div {:class (stl/css :tool-window-bar)}
           [:> title-bar* {:collapsable  false
@@ -707,7 +714,6 @@
                           :btn-icon     "search"
                           :btn-title    (tr "labels.search")}]]))]))
 
-
 (defn- on-scroll
   [event]
   (let [children (dom/get-elements-by-class "sticky-children")
@@ -788,7 +794,10 @@
         (mf/use-fn
          #(st/emit! (dw/toggle-focus-mode)))]
 
-    [:div#layers {:class (stl/css :layers) :data-testid "layer-tree"}
+    [:div {:id "layers"
+           :class (stl/css :layers)
+           :data-testid "layer-tree"}
+
      (if (d/not-empty? focus)
        [:div {:class (stl/css :tool-window-bar)}
         [:button {:class (stl/css :focus-title)
@@ -813,11 +822,11 @@
                             :key (dm/str page-id)
                             :parent-size size-parent}]
          [:div {:ref lazy-load-ref}]]
+
         [:div {:on-scroll on-scroll
                :class (stl/css :tool-window-content)
                :data-scroll-container true
                :style {:display (when (some? filtered-objects) "none")}}
-
          [:> layers-tree-wrapper* {:objects filtered-objects
                                    :key (dm/str page-id)
                                    :is-filtered true

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

@@ -5,63 +5,31 @@
 // Copyright (c) KALEIDOS INC
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/spacing.scss" as *;
+@use "ds/_sizes.scss" as *;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sp-xs) var(--sp-m);
+  gap: var(--sp-xs);
+}
 
 .tool-window-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: deprecated.$s-32;
-  min-height: deprecated.$s-32;
-  margin: deprecated.$s-8 0 deprecated.$s-4 deprecated.$s-8;
-  padding-right: deprecated.$s-12;
+  gap: var(--sp-xs);
+  padding: var(--sp-m) var(--sp-m) 0 var(--sp-m);
+}
 
-  &.search {
-    padding: 0 deprecated.$s-12 0 deprecated.$s-8;
-    gap: deprecated.$s-4;
+.search-bar {
+  flex-grow: 1;
+}
 
-    .filter-button {
-      @include deprecated.flex-center;
-      @include deprecated.button-style;
-
-      height: deprecated.$s-32;
-      width: deprecated.$s-32;
-      margin: 0;
-      border: deprecated.$s-1 solid var(--color-background-tertiary);
-      border-radius: deprecated.$br-8 deprecated.$br-2 deprecated.$br-2 deprecated.$br-8;
-      background-color: var(--color-background-tertiary);
-
-      svg {
-        height: deprecated.$s-16;
-        width: deprecated.$s-16;
-        stroke: var(--icon-foreground);
-      }
-
-      &:focus {
-        border: deprecated.$s-1 solid var(--input-border-color-focus);
-        outline: 0;
-        background-color: var(--input-background-color-active);
-        color: var(--input-foreground-color-active);
-
-        svg {
-          background-color: var(--input-background-color-active);
-        }
-      }
-
-      &:hover {
-        border: deprecated.$s-1 solid var(--input-border-color-hover);
-        background-color: var(--input-background-color-hover);
-
-        svg {
-          background-color: var(--input-background-color-hover);
-          stroke: var(--button-foreground-hover);
-        }
-      }
-
-      &.opened {
-        @extend %button-icon-selected;
-      }
-    }
-  }
+.filter-button {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .page-name {
@@ -71,22 +39,6 @@
   color: var(--title-foreground-color);
 }
 
-.icon-search {
-  @extend %button-tertiary;
-
-  height: deprecated.$s-32;
-  width: deprecated.$s-28;
-  border-radius: deprecated.$br-8;
-  margin-right: deprecated.$s-8;
-  padding: 0;
-
-  svg {
-    @extend %button-icon;
-
-    stroke: var(--icon-foreground);
-  }
-}
-
 .focus-title {
   @include deprecated.button-style;
 
@@ -142,7 +94,6 @@
   margin: deprecated.$s-2 0;
   border-radius: deprecated.$br-6;
   background-color: var(--pill-background-color);
-  cursor: pointer;
 }
 
 .layer-filter-icon,
@@ -165,7 +116,6 @@
   @extend %menu-dropdown;
 
   position: absolute;
-  left: deprecated.$s-20;
   width: deprecated.$s-192;
 
   .filter-menu-item {
@@ -247,15 +197,16 @@
 }
 
 .replace-row {
-  padding: 0 deprecated.$s-12;
-  gap: deprecated.$s-4;
+  display: flex;
+  flex-direction: row;
+  gap: var(--sp-xs);
 }
 
 .search-scope-row {
   display: flex;
   gap: deprecated.$s-16;
-  padding: deprecated.$s-4 deprecated.$s-12 deprecated.$s-8;
   align-items: center;
+  height: $sz-32;
 }
 
 .scope-option {
@@ -288,7 +239,6 @@
   @include deprecated.body-small-typography;
 
   color: var(--color-foreground-secondary);
-  cursor: pointer;
 }
 
 .scope-selected .scope-label {
@@ -298,88 +248,18 @@
 .replace-actions-row {
   display: flex;
   gap: deprecated.$s-4;
-  padding: 0 deprecated.$s-12 deprecated.$s-8;
-}
-
-.replace-input-wrapper {
-  @include deprecated.flex-center;
-
-  flex: 1;
-  height: deprecated.$s-32;
-  border: deprecated.$s-1 solid var(--search-bar-input-border-color);
-  border-radius: deprecated.$br-8;
-  background-color: var(--search-bar-input-background-color);
-
-  &:hover {
-    border: deprecated.$s-1 solid var(--input-border-color-hover);
-    background-color: var(--input-background-color-hover);
-
-    .replace-input {
-      background-color: var(--input-background-color-hover);
-    }
-  }
-
-  &:focus-within {
-    background-color: var(--input-background-color-active);
-    color: var(--input-foreground-color-active);
-    border: deprecated.$s-1 solid var(--input-border-color-focus);
-
-    .replace-input {
-      background-color: var(--input-background-color-active);
-    }
-  }
-}
-
-.replace-input {
-  width: 100%;
-  height: 100%;
-  margin: 0 deprecated.$s-8;
-  border: 0;
-  background-color: var(--input-background-color);
-  font-size: deprecated.$fs-12;
-  color: var(--input-foreground-color);
-  border-radius: deprecated.$br-8;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.replace-button {
-  @include deprecated.body-small-typography;
-  @include deprecated.button-style;
-
-  flex: 1;
-  height: deprecated.$s-28;
-  padding: 0 deprecated.$s-8;
-  border: deprecated.$s-1 solid var(--color-background-tertiary);
-  border-radius: deprecated.$br-8;
-  background-color: var(--color-background-tertiary);
-  color: var(--color-foreground-primary);
-  white-space: nowrap;
-  text-transform: uppercase;
-
-  &:hover:not(:disabled) {
-    border: deprecated.$s-1 solid var(--input-border-color-hover);
-    background-color: var(--input-background-color-hover);
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
 }
 
 .match-navigation {
   display: flex;
   align-items: center;
-  gap: deprecated.$s-2;
+  gap: var(--sp-xs);
   flex-shrink: 0;
 }
 
 .match-count {
   @include deprecated.body-small-typography;
-
+  padding: 0 var(--sp-xs);
   color: var(--color-foreground-secondary);
   white-space: nowrap;
 }
@@ -389,15 +269,9 @@
 
   color: var(--color-foreground-secondary);
   white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.clear-icon {
-  @extend %button-tag;
-
-  flex: 0 0 deprecated.$s-32;
-  height: 100%;
-  color: var(--color-icon-default);
+  display: flex;
+  align-items: center;
+  padding: var(--sp-xs);
 }
 
 .element-list {