Improve add cards dialog user experience (#23773)

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -155,12 +155,14 @@ export class HuiCardPicker extends LitElement {
           height: this._height ? `${this._height}px` : "auto",
         })}
       >
-        <div class="cards-container">
+        ${this._filter
-          ${this._filter
+          ? html`<div class="cards-container">
-            ? this._filterCards(this._cards, this._filter).map(
+              ${this._filterCards(this._cards, this._filter).map(
                 (cardElement: CardElement) => cardElement.element
-              )
+              )}
-            : html`
+            </div>`
+          : html`
+              <div class="cards-container">
                 ${suggestedCards.length > 0
                   ? html`
                       <div class="cards-container-header">
@@ -174,6 +176,8 @@ export class HuiCardPicker extends LitElement {
                 ${suggestedCards.map(
                   (cardElement: CardElement) => cardElement.element
                 )}
+              </div>
+              <div class="cards-container">
                 ${suggestedCards.length > 0
                   ? html`
                       <div class="cards-container-header">
@@ -186,6 +190,8 @@ export class HuiCardPicker extends LitElement {
                 ${othersCards.map(
                   (cardElement: CardElement) => cardElement.element
                 )}
+              </div>
+              <div class="cards-container">
                 ${customCardsItems.length > 0
                   ? html`
                       <div class="cards-container-header">
@@ -198,8 +204,8 @@ export class HuiCardPicker extends LitElement {
                 ${customCardsItems.map(
                   (cardElement: CardElement) => cardElement.element
                 )}
-              `}
+              </div>
-        </div>
+            `}
         <div class="cards-container">
           <div
             class="card manual"
@@ -216,6 +222,7 @@ export class HuiCardPicker extends LitElement {
                 `ui.panel.lovelace.editor.card.generic.manual_description`
               )}
             </div>
+            <ha-ripple></ha-ripple>
           </div>
         </div>
       </div>
@@ -442,19 +449,20 @@ export class HuiCardPicker extends LitElement {
       }
     }
 
+    // prevent tabbing to card
+    if (element) {
+      element.tabIndex = -1;
+    }
+
     return html`
-      <div class="card">
+      <div class="card" tabindex="0">
         <div
           class="overlay"
           @click=${this._cardPicked}
           .config=${cardConfig}
         ></div>
         <div class="card-header">
-          ${customCard
+          ${customCard ? customCard.name || customCard.type : name}
-            ? `${this.hass!.localize(
-                "ui.panel.lovelace.editor.cardpicker.custom_card"
-              )}: ${customCard.name || customCard.type}`
-            : name}
         </div>
         <div
           class="preview ${classMap({
@@ -470,6 +478,7 @@ export class HuiCardPicker extends LitElement {
                 )
               : description}
         </div>
+        <ha-ripple></ha-ripple>
       </div>
     `;
   }
@@ -481,14 +490,28 @@ export class HuiCardPicker extends LitElement {
           display: block;
           --mdc-shape-small: var(--card-picker-search-shape);
           margin: var(--card-picker-search-margin);
+          position: sticky;
+          top: 0;
+          z-index: 10;
+          background-color: var(
+              --ha-dialog-surface-background,
+              var(--mdc-theme-surface, #fff)
+          );
         }
 
         .cards-container-header {
           font-size: 16px;
           font-weight: 500;
-          padding: 12px 8px 4px 8px;
+          padding: 12px 8px;
           margin: 0;
           grid-column: 1 / -1;
+          position: sticky;
+          top: 56px;
+          z-index: 1;
+          background: linear-gradient(90deg, var(
+                  --ha-dialog-surface-background,
+                  var(--mdc-theme-surface, #fff)
+          ) 0%, #ffffff00 80%);
         }
 
         .cards-container {
@@ -508,8 +531,7 @@ export class HuiCardPicker extends LitElement {
           cursor: pointer;
           position: relative;
           overflow: hidden;
-          border: var(--ha-card-border-width, 1px) solid
+          border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color));
-            var(--ha-card-border-color, var(--divider-color));
         }
 
         .card-header {
@@ -522,11 +544,6 @@ export class HuiCardPicker extends LitElement {
           padding: 12px 16px;
           display: block;
           text-align: center;
-          background: var(
-            --ha-card-background,
-            var(--card-background-color, white)
-          );
-          border-bottom: 1px solid var(--divider-color);
         }
 
         .preview {
@@ -539,7 +556,6 @@ export class HuiCardPicker extends LitElement {
         }
 
         .preview > :first-child {
-          zoom: 0.6;
           display: block;
           width: 100%;
         }

src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts

@@ -198,7 +198,7 @@ export class HuiCreateDialogCard
 
         ha-dialog {
           --mdc-dialog-max-width: 845px;
-          --dialog-content-padding: 2px 24px 20px 24px;
+          --dialog-content-padding: 0 24px 20px 24px;
           --dialog-z-index: 6;
         }
 

src/translations/en.json

@@ -6425,7 +6425,7 @@
           "edit_card": {
             "header": "Card configuration",
             "typed_header": "{type} Card configuration",
-            "pick_card": "Which card would you like to add?",
+            "pick_card": "Add to dashboard",
             "pick_card_title": "Which card would you like to add to {name}",
             "toggle_editor": "Toggle editor",
             "unsaved_changes": "You have unsaved changes",
@@ -7252,7 +7252,6 @@
           },
           "cardpicker": {
             "no_description": "No description available.",
-            "custom_card": "Custom",
             "domain": "Domain",
             "entity": "Entity",
             "by_entity": "By entity",