Catch errors in preview and fix entity picker (#2183)

* Catch errors in preview and fix entity picker

* Replace add button with entity-picker

src/panels/lovelace/components/hui-entity-editor.ts

@@ -42,16 +42,23 @@ export class HuiEntityEditor extends LitElement {
             `;
           })
         }
+        <ha-entity-picker
+          .hass="${this.hass}"
+          @change="${this._addEntity}"
+        ></ha-entity-picker>
       </div>
-      <paper-button noink raised @click="${this._addEntity}"
-        >Add Entity</paper-button
-      >
     `;
   }
 
-  private _addEntity() {
-    const newConfigEntities = this.entities!.concat({ entity: "" });
-
+  private _addEntity(ev: Event): void {
+    const target = ev.target! as EditorTarget;
+    if (target.value === "") {
+      return;
+    }
+    const newConfigEntities = this.entities!.concat({
+      entity: target.value as string,
+    });
+    target.value = "";
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 

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

@@ -41,7 +41,11 @@ export class HuiCardPreview extends HTMLElement {
     const tag = getCardElementTag(configValue.type);
 
     if (tag.toUpperCase() === this._element.tagName) {
-      this._element.setConfig(configValue);
+      try {
+        this._element.setConfig(configValue);
+      } catch (err) {
+        this._createCard(createErrorCardConfig(err.message, configValue));
+      }
     } else {
       this._createCard(configValue);
     }

src/panels/lovelace/editor/hui-edit-view.ts

@@ -160,6 +160,7 @@ export class HuiEditView extends hassLocalizeLitMixin(LitElement) {
         paper-tabs {
           --paper-tabs-selection-bar-color: var(--primary-color);
           text-transform: uppercase;
+          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
         paper-button paper-spinner {
           width: 14px;