Show local network URL used in Home Assistant URL settings

src/components/ha-settings-row.ts

@@ -5,6 +5,8 @@ import { customElement, property } from "lit/decorators";
 export class HaSettingsRow extends LitElement {
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ type: Boolean, reflect: true }) public slim = false; // remove padding and min-height
+
   @property({ type: Boolean, attribute: "three-line" })
   public threeLine = false;
 
@@ -109,6 +111,14 @@ export class HaSettingsRow extends LitElement {
         display: flex;
         align-items: center;
       }
+      :host([slim]),
+      :host([slim]) .content,
+      :host([slim]) ::slotted(ha-switch) {
+        padding: 0;
+      }
+      :host([slim]) .body {
+        min-height: 0;
+      }
     `;
   }
 }

src/data/network.ts

@@ -26,6 +26,12 @@ export interface NetworkConfig {
   configured_adapters: string[];
 }
 
+export interface NetworkUrls {
+  internal: string;
+  external: string;
+  cloud: string;
+}
+
 export const getNetworkConfig = (hass: HomeAssistant) =>
   hass.callWS<NetworkConfig>({
     type: "network",
@@ -41,3 +47,8 @@ export const setNetworkConfig = (
       configured_adapters: configured_adapters,
     },
   });
+
+export const getNetworkUrls = (hass: HomeAssistant) =>
+  hass.callWS<NetworkUrls>({
+    type: "network/url",
+  });

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -153,7 +153,7 @@ export class CloudRemotePref extends LitElement {
                 class="toggle-unmasked-url"
                 toggles
                 .label=${this.hass.localize(
-                  `ui.panel.config.cloud.account.remote.${this._unmaskedUrl ? "hide" : "show"}_url`
+                  `ui.panel.config.common.${this._unmaskedUrl ? "hide" : "show"}_url`
                 )}
                 @click=${this._toggleUnmaskedUrl}
                 .path=${this._unmaskedUrl ? mdiEyeOff : mdiEye}
@@ -165,9 +165,7 @@ export class CloudRemotePref extends LitElement {
               unelevated
             >
               <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
-              ${this.hass.localize(
-                "ui.panel.config.cloud.account.remote.copy_link"
-              )}
+              ${this.hass.localize("ui.panel.config.common.copy_link")}
             </ha-button>
           </div>