Filter out homekit and matter iot standards (#13985)

* Filter out homekit and matter iot standards

* add divider between discovered

* Update dialog-add-integration.ts

* Update ha-domain-integrations.ts

* Update en.json

* Change headers

* update styling

* translation

src/panels/config/areas/ha-config-area-page.ts

@@ -639,21 +639,6 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
-        h1 {
-          margin: 0;
-          font-family: var(--paper-font-headline_-_font-family);
-          -webkit-font-smoothing: var(
-            --paper-font-headline_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-headline_-_font-size);
-          font-weight: var(--paper-font-headline_-_font-weight);
-          letter-spacing: var(--paper-font-headline_-_letter-spacing);
-          line-height: var(--paper-font-headline_-_line-height);
-          opacity: var(--dark-primary-opacity);
-          display: flex;
-          align-items: center;
-        }
-
         h3 {
           margin: 0;
           padding: 0 16px;

src/panels/config/integrations/dialog-add-integration.ts

@@ -187,12 +187,7 @@ class AddIntegrationDialog extends LitElement {
 
       for (const [domain, domainBrands] of Object.entries(sb)) {
         const integration = this._findIntegration(domain);
-        if (
+        if (!integration) {
-          !integration ||
-          (!integration.config_flow &&
-            !integration.iot_standards &&
-            !integration.integrations)
-        ) {
           continue;
         }
         for (const [slug, name] of Object.entries(domainBrands)) {

src/panels/config/integrations/ha-domain-integrations.ts

@@ -36,7 +36,9 @@ class HaDomainIntegrations extends LitElement {
   protected render() {
     return html`<mwc-list>
       ${this.flowsInProgress?.length
-        ? html`<h3>We discovered the following:</h3>
+        ? html`<h3>
+              ${this.hass.localize("ui.panel.config.integrations.discovered")}
+            </h3>
             ${this.flowsInProgress.map(
               (flow) => html`<mwc-list-item
                 graphic="medium"
@@ -60,36 +62,46 @@ class HaDomainIntegrations extends LitElement {
                 >
                 <ha-icon-next slot="meta"></ha-icon-next>
               </mwc-list-item>`
-            )}`
+            )}
+            <li divider role="separator"></li>
+            ${this.integration?.integrations
+              ? html`<h3>
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.available_integrations"
+                  )}
+                </h3>`
+              : ""}`
         : ""}
       ${this.integration?.iot_standards
-        ? this.integration.iot_standards.map((standard) => {
+        ? this.integration.iot_standards
-            const domain: string = standardToDomain[standard] || standard;
+            .filter((standard) => standard in standardToDomain)
-            return html`<mwc-list-item
+            .map((standard) => {
-              graphic="medium"
+              const domain: string = standardToDomain[standard];
-              .domain=${domain}
+              return html`<mwc-list-item
-              @click=${this._standardPicked}
+                graphic="medium"
-              hasMeta
+                .domain=${domain}
-            >
+                @click=${this._standardPicked}
-              <img
+                hasMeta
-                slot="graphic"
-                loading="lazy"
-                src=${brandsUrl({
-                  domain,
-                  type: "icon",
-                  useFallback: true,
-                  darkOptimized: this.hass.themes?.darkMode,
-                })}
-                referrerpolicy="no-referrer"
-              />
-              <span
-                >${this.hass.localize(
-                  `ui.panel.config.integrations.add_${domain}_device`
-                )}</span
               >
-              <ha-icon-next slot="meta"></ha-icon-next>
+                <img
-            </mwc-list-item>`;
+                  slot="graphic"
-          })
+                  loading="lazy"
+                  src=${brandsUrl({
+                    domain,
+                    type: "icon",
+                    useFallback: true,
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                />
+                <span
+                  >${this.hass.localize(
+                    `ui.panel.config.integrations.add_${domain}_device`
+                  )}</span
+                >
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </mwc-list-item>`;
+            })
         : ""}
       ${this.integration?.integrations
         ? Object.entries(this.integration.integrations)
@@ -155,9 +167,11 @@ class HaDomainIntegrations extends LitElement {
                 @click=${this._integrationPicked}
                 hasMeta
               >
-                Setup another instance of
+                ${this.hass.localize("ui.panel.config.integrations.new_flow", {
-                ${this.integration.name ||
+                  integration:
-                domainToName(this.hass.localize, this.domain)}
+                    this.integration.name ||
+                    domainToName(this.hass.localize, this.domain),
+                })}
                 <ha-icon-next slot="meta"></ha-icon-next>
               </mwc-list-item>`
             : html`<ha-integration-list-item
@@ -272,16 +286,25 @@ class HaDomainIntegrations extends LitElement {
     css`
       :host {
         display: block;
+        --mdc-list-item-graphic-size: 40px;
+        --mdc-list-side-padding: 24px;
       }
       h3 {
-        margin: 0 24px;
+        margin: 8px 24px 0;
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
         font-size: 14px;
+        font-weight: 500;
+      }
+      h3:first-of-type {
+        margin-top: 0;
       }
       img {
         width: 40px;
         height: 40px;
       }
+      li[divider] {
+        margin-top: 8px;
+      }
     `,
   ];
 }

src/panels/config/integrations/ha-integration-list-item.ts

@@ -104,8 +104,8 @@ export class HaIntegrationListItem extends ListItemBase {
       styles,
       css`
         :host {
-          padding-left: var(--mdc-list-side-padding, 20px);
+          --mdc-list-side-padding: 24px;
-          padding-right: var(--mdc-list-side-padding, 20px);
+          --mdc-list-item-graphic-size: 40px;
         }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {

src/translations/en.json

@@ -2850,6 +2850,8 @@
           "description": "Manage integrations with services or devices",
           "integration": "integration",
           "discovered": "Discovered",
+          "available_integrations": "Available integrations",
+          "new_flow": "Setup another instance of {integration}",
           "attention": "Attention required",
           "configured": "Configured",
           "new": "Select brand",
@@ -2973,12 +2975,8 @@
               "description": "This step requires you to visit an external website to be completed.",
               "open_site": "Open website"
             },
-            "pick_flow_step": {
-              "title": "We discovered these, want to set them up?",
-              "new_flow": "No, set up an other instance of {integration}"
-            },
             "loading": {
-              "loading_flow": "Please wait while {integration} is being setup",
+              "loading_flow": "Please wait, starting configuration wizard for {integration}",
               "loading_step": "Loading next step for {integration}",
               "fallback_title": "the integration"
             },