✨ Add shortcut for creating variant to the shortcuts panel (#7319)

* ✨ Add shortcut for creating variant to the shortcuts panel

* ♻️ Update components to new rumext syntax

* 🐛 Fix unique "key" prop error for each child in a list

* ♻️ Remove deprecated icons and CSS cleanup

* 📎 PR changes

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

@@ -173,10 +173,10 @@
                           :subsections [:modify-layers]
                           :fn #(emit-when-no-readonly (dw/unmask-group))}
 
-   :create-component     {:tooltip (ds/meta "K")
+   :create-component-variant {:tooltip (ds/meta "K")
-                          :command (ds/c-mod "k")
+                              :command (ds/c-mod "k")
-                          :subsections [:modify-layers]
+                              :subsections [:modify-layers]
-                          :fn #(emit-when-no-readonly (dwv/add-component-or-variant))}
+                              :fn #(emit-when-no-readonly (dwv/add-component-or-variant))}
 
    :detach-component     {:tooltip (ds/meta-shift "K")
                           :command (ds/c-mod "shift+k")

frontend/src/app/main/ui/components/search_bar.cljs

@@ -46,6 +46,7 @@
                    :size "s"
                    :class (stl/css :icon)}])
       [:input {:id id
+               :class (stl/css :search-input)
                :on-change handle-change
                :value value
                :auto-focus auto-focus

frontend/src/app/main/ui/components/search_bar.scss

@@ -18,6 +18,7 @@
 .icon {
   margin-left: $s-8;
   flex: 0 0 $s-16;
+  color: var(--color-foreground-primary);
 }
 
 .search-input-wrapper {
@@ -27,46 +28,47 @@
   border: $s-1 solid var(--search-bar-input-border-color);
   border-radius: $br-8;
   background-color: var(--search-bar-input-background-color);
-  input {
+
-    width: 100%;
-    height: 100%;
-    margin: 0 $s-8 0 $s-4;
-    border: 0;
-    background-color: var(--input-background-color);
-    font-size: $fs-12;
-    color: var(--input-foreground-color);
-    border-radius: $br-8;
-    &:focus {
-      outline: none;
-    }
-  }
   &:hover {
     border: $s-1 solid var(--input-border-color-hover);
     background-color: var(--input-background-color-hover);
-    input {
+    .search-input {
       background-color: var(--input-background-color-hover);
     }
   }
+
   &:focus-within {
     background-color: var(--input-background-color-active);
     color: var(--input-foreground-color-active);
     border: $s-1 solid var(--input-border-color-focus);
-    input {
+    .search-input {
       background-color: var(--input-background-color-active);
     }
   }
 }
 
+.search-input {
+  width: 100%;
+  height: 100%;
+  margin: 0 $s-8 0 $s-4;
+  border: 0;
+  background-color: var(--input-background-color);
+  font-size: $fs-12;
+  color: var(--input-foreground-color);
+  border-radius: $br-8;
+  &:focus {
+    outline: none;
+  }
+}
+
 .clear-icon {
   @extend .button-tag;
   flex: 0 0 $s-32;
   height: 100%;
-  svg {
+  color: var(--color-icon-default);
-    stroke: var(--icon-foreground);
-  }
 }
 
 .search-box.has-children .search-input-wrapper {
-  border-radius: $br-2 $br-8 $br-8 $br-2;
+  border-radius: 0 $br-8 $br-8 0;
   margin-left: 0;
 }

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

@@ -588,7 +588,7 @@
         [:> menu-separator* {}]
 
         [:> menu-entry* {:title (tr "workspace.shape.menu.create-component")
-                         :shortcut (sc/get-tooltip :create-component)
+                         :shortcut (sc/get-tooltip :create-component-variant)
                          :on-click do-add-component}]
         (when (not single?)
           [:> menu-entry* {:title (tr "workspace.shape.menu.create-multiple-components")
@@ -608,7 +608,7 @@
        [:*
         [:> menu-separator*]
         [:> menu-entry* {:title (tr "workspace.shape.menu.add-variant")
-                         :shortcut (sc/get-tooltip :create-component)
+                         :shortcut (sc/get-tooltip :create-component-variant)
                          :on-click do-add-variant}]])
 
      (when (and (not single?) all-main? (not any-variant?))

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

@@ -514,7 +514,7 @@
                          :action do-update-component})
                       (when (and (or (not multi) same-variant?) main-instance?)
                         {:title (tr "workspace.shape.menu.add-variant")
-                         :shortcut :create-component
+                         :shortcut :create-component-variant
                          :action do-add-variant})
                       (when (and same-variant? main-instance? variant-id for-design-tab?)
                         {:title (tr "workspace.shape.menu.add-variant-property")

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

@@ -18,17 +18,18 @@
    [app.main.data.workspace.shortcuts]
    [app.main.store :as st]
    [app.main.ui.components.search-bar :refer [search-bar*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.icons :as deprecated-icon]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.strings :refer [matches-search]]
    [clojure.set :as set]
    [clojure.string]
+   [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(mf/defc converted-chars
+(mf/defc converted-chars*
-  [{:keys [char command] :as props}]
+  [{:keys [char command]}]
   (let [modified-keys {:up    ds/up-arrow
                        :down  ds/down-arrow
                        :left  ds/left-arrow
@@ -93,7 +94,7 @@
     (tr "shortcuts.clear-undo")
     (tr "shortcuts.copy")
     (tr "shortcuts.copy-link")
-    (tr "shortcuts.create-component")
+    (tr "shortcuts.create-component-variant")
     (tr "shortcuts.create-new-project")
     (tr "shortcuts.cut")
     (tr "shortcuts.decrease-zoom")
@@ -238,8 +239,8 @@
             (assoc acc subsection {:children shortcuts-by-subsection})))]
     (reduce reduce-sc {} subsections)))
 
-(mf/defc shortcuts-keys
+(mf/defc shortcuts-keys*
-  [{:keys [content command] :as props}]
+  [{:keys [content command]}]
   (let [managed-list    (if (coll? content)
                           content
                           (conj () content))
@@ -251,26 +252,26 @@
         penultimate     (last short-char-list)]
     [:span {:class (stl/css :keys)}
      (for [chars short-char-list]
-       [:*
+       [:* {:key (str/join chars)}
         (for [char chars]
-          [:& converted-chars {:key (dm/str char "-" (name command))
+          [:> converted-chars* {:key (dm/str char "-" (name command))
-                               :char char
+                                :char char
-                               :command command}])
+                                :command command}])
         (when (not= chars penultimate) [:span {:class (stl/css :space)} ","])])
      (when (not= last-element penultimate)
        [:*
         [:span {:class (stl/css :space)} (tr "shortcuts.or")]
         (for [char last-element]
-          [:& converted-chars {:key (dm/str char "-" (name command))
+          [:> converted-chars* {:key (dm/str char "-" (name command))
-                               :char char
+                                :char char
-                               :command command}])])]))
+                                :command command}])])]))
 
-(mf/defc shortcut-row
+(mf/defc shortcut-row*
-  [{:keys [elements filter-term match-section? match-subsection?] :as props}]
+  [{:keys [elements filter-term is-match-section is-match-subsection]}]
   (let [shortcut-name         (keys elements)
         shortcut-translations (map #(translation-keyname :sc %) shortcut-name)
         match-shortcut?       (some #(matches-search % @filter-term) shortcut-translations)
-        filtered              (if (and (or match-section? match-subsection?) (not match-shortcut?))
+        filtered              (if (and (or is-match-section is-match-subsection) (not match-shortcut?))
                                 shortcut-translations
                                 (filter #(matches-search % @filter-term) shortcut-translations))
         sorted-filtered       (sort filtered)]
@@ -284,22 +285,22 @@
                :key command-translate}
           [:span {:class (stl/css :command-name)}
            command-translate]
-          [:& shortcuts-keys {:content content
+          [:> shortcuts-keys* {:content content
-                              :command command}]]))]))
+                               :command command}]]))]))
 
-(mf/defc section-title
+(mf/defc section-title*
-  [{:keys [is-visible? name is-sub?] :as props}]
+  [{:keys [name is-visible is-sub]}]
-  [:div {:class (if is-sub?
+  [:div {:class (if is-sub
                   (stl/css :subsection-title)
                   (stl/css :section-title))}
-   [:span {:class (stl/css-case :open is-visible?
+   [:> icon* {:icon-id (if is-visible i/arrow-down i/arrow-right)
-                                :collapsed-shortcuts true)} deprecated-icon/arrow]
+              :size "s"}]
-   [:span {:class (if is-sub?
+   [:span {:class (if is-sub
                     (stl/css :subsection-name)
                     (stl/css :section-name))} name]])
 
-(mf/defc shortcut-subsection
+(mf/defc shortcut-subsection*
-  [{:keys [subsections manage-sections filter-term match-section? open-sections] :as props}]
+  [{:keys [subsections manage-sections filter-term is-match-section open-sections]}]
   (let [subsections-names       (keys subsections)
         subsection-translations (if (= :none (first subsections-names))
                                   (map #(translation-keyname :sc %) subsections-names)
@@ -308,10 +309,10 @@
     ;; Basics section is treated different because it has no sub sections
     (if (= :none (first subsections-names))
       (let [basic-shortcuts (:none subsections)]
-        [:& shortcut-row {:elements (:children basic-shortcuts)
+        [:> shortcut-row* {:elements (:children basic-shortcuts)
-                          :filter-term filter-term
+                           :filter-term filter-term
-                          :match-section? match-section?
+                           :is-match-section is-match-section
-                          :match-subsection? true}])
+                           :is-match-subsection true}])
 
       [:ul {:class (stl/css :subsection-menu)}
        (for [sub-translated sorted-translations]
@@ -321,21 +322,21 @@
                match-subsection?   (matches-search (translation-keyname :sub-sec sub-name) @filter-term)
                shortcut-names      (map #(translation-keyname :sc %) (keys (:children sub-info)))
                match-shortcuts?    (some #(matches-search % @filter-term) shortcut-names)]
-           (when (or match-subsection? match-shortcuts? match-section?)
+           (when (or match-subsection? match-shortcuts? is-match-section)
              [:li {:key sub-translated
                    :on-click (manage-sections (:id sub-info))}
-              [:& section-title {:name sub-translated
+              [:> section-title* {:name sub-translated
-                                 :is-sub? true
+                                  :is-visible visible?
-                                 :is-visible? visible?}]
+                                  :is-sub true}]
 
               [:div {:style {:display (if visible? "initial" "none")}}
-               [:& shortcut-row {:elements (:children sub-info)
+               [:> shortcut-row* {:elements (:children sub-info)
-                                 :filter-term filter-term
+                                  :filter-term filter-term
-                                 :match-section?  match-section?
+                                  :is-match-section is-match-section
-                                 :match-subsection? match-subsection?}]]])))])))
+                                  :is-match-subsection match-subsection?}]]])))])))
 
-(mf/defc shortcut-section
+(mf/defc shortcut-section*
-  [{:keys [section manage-sections open-sections filter-term] :as props}]
+  [{:keys [section manage-sections open-sections filter-term]}]
   (let [[section-key section-info] section
         section-id          (:id section-info)
         section-translation (translation-keyname :sec section-key)
@@ -354,16 +355,16 @@
     (when (or match-section? match-subsection? match-shortcut?)
       [:div {:class (stl/css :section)
              :on-click (manage-sections section-id)}
-       [:& section-title {:is-visible? visible?
+       [:> section-title* {:name section-translation
-                          :is-sub? false
+                           :is-visible visible?
-                          :name    section-translation}]
+                           :is-sub false}]
 
        [:div {:style {:display (if visible? "initial" "none")}}
-        [:& shortcut-subsection {:subsections     subsections
+        [:> shortcut-subsection* {:subsections subsections
-                                 :open-sections   open-sections
+                                  :open-sections open-sections
-                                 :manage-sections manage-sections
+                                  :manage-sections manage-sections
-                                 :match-section?  match-section?
+                                  :is-match-section match-section?
-                                 :filter-term     filter-term}]]])))
+                                  :filter-term filter-term}]]])))
 
 (mf/defc shortcuts-container*
   [{:keys [class]}]
@@ -496,11 +497,13 @@
     [:div {:class (dm/str class " " (stl/css :shortcuts))}
      [:div {:class (stl/css :shortcuts-header)}
       [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
-      [:div {:class (stl/css :shortcuts-close-button)
+      [:> icon-button* {:variant "ghost"
-             :on-click close-fn}
+                        :icon i/close
-       deprecated-icon/close]]
+                        :class (stl/css :shortcuts-close-button)
-     [:div {:class (stl/css :search-field)}
+                        :on-click close-fn
+                        :aria-label (tr "labels.close")}]]
 
+     [:div {:class (stl/css :search-field)}
       [:> search-bar* {:on-change on-search-term-change-2
                        :on-clear on-search-clear-click
                        :value @filter-term
@@ -510,9 +513,9 @@
      (if match-any?
        [:div {:class (stl/css :shortcuts-list)}
         (for [section all-shortcuts]
-          [:& shortcut-section
+          [:> shortcut-section* {:key (->> section second :id first)
-           {:section section
+                                 :section section
-            :manage-sections manage-sections
+                                 :manage-sections manage-sections
-            :open-sections open-sections
+                                 :open-sections open-sections
-            :filter-term filter-term}])]
+                                 :filter-term filter-term}])]
        [:div {:class (stl/css :not-found)} (tr "shortcuts.not-found")])]))

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

@@ -15,64 +15,7 @@
 }
 
 .search-field {
-  display: flex;
-  align-items: center;
-  height: $s-32;
   margin: $s-16 $s-12 $s-4 $s-12;
-  border-radius: $br-8;
-  font-family: "worksans", "vazirmatn", sans-serif;
-  background-color: var(--color-background-tertiary);
-  .search-box {
-    align-items: center;
-    display: flex;
-    width: 100%;
-
-    .icon-wrapper {
-      display: flex;
-      svg {
-        @extend .button-icon-small;
-        stroke: var(--icon-foreground);
-      }
-    }
-
-    .input-text {
-      @include removeInputStyle;
-      height: $s-32;
-      width: 100%;
-      margin: 0;
-      padding: $s-4;
-      border: 0;
-      font-size: $fs-12;
-      color: var(--color-foreground-primary);
-      &::placeholder {
-        color: var(--color-foreground-secondary);
-      }
-      &:focus-visible {
-        border-color: var(--color-accent-primary-muted);
-      }
-    }
-    .clear-btn {
-      @include buttonStyle;
-      @include flexCenter;
-      height: $s-16;
-      width: $s-16;
-      .clear-icon {
-        @include flexCenter;
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-        }
-      }
-    }
-  }
-  .search-icon {
-    @include flexCenter;
-    width: $s-28;
-    svg {
-      @extend .button-icon-small;
-      stroke: var(--icon-foreground);
-    }
-  }
 }
 
 .shortcuts-header {
@@ -92,18 +35,9 @@
   }
 
   .shortcuts-close-button {
-    @extend .button-tertiary;
     position: absolute;
-    right: $s-2;
+    right: 0;
-    top: $s-2;
+    top: 0;
-    height: $s-28;
-    width: $s-28;
-    border-radius: $br-5;
-
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-    }
   }
 }
 
@@ -122,7 +56,7 @@
   flex-direction: column;
   height: 100%;
   padding: $s-12;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: $fs-12;
   color: var(--title-foreground-color);
 
@@ -135,27 +69,13 @@
     padding: $s-8 0;
     cursor: pointer;
 
-    .collapsed-shortcuts {
-      @include flexCenter;
-      svg {
-        @extend .button-icon-small;
-        stroke: var(--icon-foreground);
-      }
-      &.open {
-        transform: rotate(90deg);
-      }
-    }
     .subsection-name,
     .section-name {
       padding-left: $s-4;
     }
+
     &:hover {
       color: var(--title-foreground-color-hover);
-      .collapsed-shortcuts {
-        svg {
-          stroke: var(--title-foreground-color-hover);
-        }
-      }
     }
   }
 

frontend/translations/en.po

@@ -3903,8 +3903,8 @@ msgid "shortcuts.copy-props"
 msgstr "Copy properties"
 
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:95
-msgid "shortcuts.create-component"
+msgid "shortcuts.create-component-variant"
-msgstr "Create component"
+msgstr "Create component / variant"
 
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:96
 msgid "shortcuts.create-new-project"

frontend/translations/es.po

@@ -3902,8 +3902,8 @@ msgid "shortcuts.copy-props"
 msgstr "Copiar propiedades"
 
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:95
-msgid "shortcuts.create-component"
+msgid "shortcuts.create-component-variant"
-msgstr "Crear componente"
+msgstr "Crear componente / variante"
 
 #: src/app/main/ui/workspace/sidebar/shortcuts.cljs:96
 msgid "shortcuts.create-new-project"