Improve matter share device dialog (#19693)

* Improve matter share device dialog

* Add border

* Update dialog-matter-open-commissioning-window.ts

src/panels/config/integrations/integration-panels/matter/dialog-matter-open-commissioning-window.ts

@@ -1,18 +1,21 @@
 import "@material/mwc-button/mwc-button";
-import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
+import { mdiCloseCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
-import "../../../../../components/ha-qr-code";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
+import "../../../../../components/ha-qr-code";
+import { domainToName } from "../../../../../data/integration";
 import {
-  openMatterCommissioningWindow,
   MatterCommissioningParameters,
+  openMatterCommissioningWindow,
 } from "../../../../../data/matter";
 import { haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
+import { brandsUrl } from "../../../../../util/brands-url";
 import { MatterOpenCommissioningWindowDialogParams } from "./show-dialog-matter-open-commissioning-window";
+import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
 
 @customElement("dialog-matter-open-commissioning-window")
 class DialogMatterOpenCommissioningWindow extends LitElement {
@@ -52,28 +55,46 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.matter.open_commissioning_window.success"
                 )}
+                <br />
+                ${this.hass.localize(
+                  "ui.panel.config.matter.open_commissioning_window.scan_code"
+                )}
               </p>
-              <div class="flex-container">
+              <div class="sharing-code-container">
-                <ha-svg-icon
+                <div class="sharing-code">
-                  .path=${mdiCheckCircle}
+                  <img
-                  class="success"
+                    crossorigin="anonymous"
-                ></ha-svg-icon>
+                    referrerpolicy="no-referrer"
-                <div class="status">
+                    alt=${domainToName(this.hass.localize, "matter")}
-                  <p>
+                    src=${brandsUrl({
-                    ${this.hass.localize(
+                      domain: "matter",
-                      "ui.panel.config.matter.open_commissioning_window.sharing_code"
+                      type: "logo",
-                    )}: <b>${this._commissionParams.setup_manual_code}</b>
+                      darkOptimized: this.hass.themes?.darkMode,
-                  </p>
+                    })}
+                  />
+                  <ha-qr-code
+                    .data=${this._commissionParams.setup_qr_code}
+                    errorCorrectionLevel="quartile"
+                    scale="6"
+                    margin="1"
+                  ></ha-qr-code>
+                  <span class="code"
+                    >${this._commissionParams.setup_manual_code.substring(
+                      0,
+                      4
+                    )}-${this._commissionParams.setup_manual_code.substring(
+                      4,
+                      7
+                    )}-${this._commissionParams.setup_manual_code.substring(
+                      7
+                    )}</span
+                  >
                 </div>
               </div>
-              <ha-qr-code
+              <mwc-button slot="primaryAction" @click=${this._copyCode}>
-                .data=${this._commissionParams.setup_qr_code}
+                ${this.hass.localize(
-                errorCorrectionLevel="quartile"
+                  "ui.panel.config.matter.open_commissioning_window.copy_code"
-                scale="6"
+                )}
-              ></ha-qr-code>
-              <div></div>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize("ui.common.close")}
               </mwc-button>
             `
           : this._status === "started"
@@ -145,9 +166,18 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
     }
   }
 
+  private async _copyCode() {
+    if (!this._commissionParams) {
+      return;
+    }
+    await copyToClipboard(this._commissionParams.setup_manual_code);
+    this.closeDialog();
+  }
+
   public closeDialog(): void {
     this.device_id = undefined;
     this._status = undefined;
+    this._commissionParams = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -193,6 +223,30 @@ class DialogMatterOpenCommissioningWindow extends LitElement {
         .flex-container ha-svg-icon {
           margin-right: 20px;
         }
+
+        .sharing-code-container {
+          display: flex;
+          justify-content: center;
+          padding-top: 16px;
+        }
+
+        .sharing-code {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border: 2px solid;
+          border-radius: 16px;
+          padding: 16px;
+        }
+
+        .sharing-code img {
+          width: 160px;
+          margin-bottom: 8px;
+        }
+
+        .code {
+          font-family: monospace;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -4662,8 +4662,9 @@
             "start_commissioning": "Share device",
             "in_progress": "We're communicating with the device. This may take some time.",
             "failed": "The command failed. Additional information may be available in the logs.",
-            "success": "Your device can now be added to another Matter controller, scan the QR code below or enter the sharing code in the app of the controller you want to add your device to.",
+            "success": "Your device is ready to be added to another Matter platform.",
-            "sharing_code": "Sharing code"
+            "scan_code": "With their app, scan the QR code or enter the sharing code below to finish set up.",
+            "copy_code": "Copy code"
           }
         },
         "tips": {