config+devtools: add safe-area content insets and layout adjustments (config dashboard, section padding, devtools action paddings)

* Update dependency @types/chromecast-caf-receiver to v6.0.24

* Use enum strings directly to make TS happy

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

cast/src/media/entrypoint.ts

@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/entrypoint.ts

@@ -40,7 +40,8 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ castContext.addCustomMessageListener(
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
+    if (playerManager.getPlayerState() !== "IDLE") {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

package.json

@@ -162,7 +162,7 @@
     "@rspack/core": "1.5.1",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.0",

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -246,11 +246,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
           </ha-list-item>
         </ha-button-menu>
 
-        <ha-config-section
-          .narrow=${this.narrow}
-          .isWide=${this.isWide}
-          full-width
-        >
+        <div class="content">
           ${repairsIssues.length || canInstallUpdates.length
             ? html`<ha-card outlined>
                 ${repairsIssues.length
@@ -321,7 +317,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
             ></ha-config-navigation>
           </ha-card>
           <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
-        </ha-config-section>
+        </div>
       </ha-top-app-bar-fixed>
     `;
   }
@@ -392,10 +388,19 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
         :host(:not([narrow])) ha-card:last-child {
           margin-bottom: max(24px, var(--safe-area-inset-bottom));
         }
-        ha-config-section {
-          margin: auto;
-          margin-top: -32px;
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 24px;
+          margin-top: 24px;
+          margin-left: var(--safe-area-content-inset-left);
+          margin-right: var(--safe-area-content-inset-right);
+        }
+        .content > * {
           max-width: 600px;
+          width: 100%;
+          display: block;
         }
         ha-card {
           overflow: hidden;
@@ -419,8 +424,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
             border-radius: 0;
             box-shadow: unset;
           }
-          ha-config-section {
-            margin-top: -42px;
+          .content {
+            margin-top: -1px;
+            margin-left: 0;
+            margin-right: 0;
           }
         }
 

src/panels/config/ha-config-section.ts

@@ -39,7 +39,8 @@ export class HaConfigSection extends LitElement {
       display: block;
     }
     .content {
-      padding: 28px 20px 0;
+      padding: 28px max(20px, var(--safe-area-content-inset-right)) 0
+        max(20px, var(--safe-area-content-inset-left));
       max-width: 1040px;
       margin: 0 auto;
     }

src/panels/developer-tools/action/developer-tools-action.ts

@@ -612,7 +612,7 @@ class HaPanelDevAction extends LitElement {
           padding: max(16px, var(--safe-area-inset-top))
             max(16px, var(--safe-area-inset-right))
             max(16px, var(--safe-area-inset-bottom))
-            max(16px, var(--safe-area-inset-left));
+            max(16px, var(--safe-area-content-inset-left));
           max-width: 1200px;
           margin: auto;
         }
@@ -621,7 +621,7 @@ class HaPanelDevAction extends LitElement {
           padding: max(8px, var(--safe-area-inset-top))
             max(16px, var(--safe-area-inset-right))
             max(8px, var(--safe-area-inset-bottom))
-            max(16px, var(--safe-area-inset-left));
+            max(16px, var(--safe-area-content-inset-left));
           border-top: 1px solid var(--divider-color);
           border-bottom: 1px solid var(--divider-color);
           background: var(--card-background-color);

yarn.lock

@@ -4445,10 +4445,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/chromecast-caf-receiver@npm:6.0.22":
-  version: 6.0.22
-  resolution: "@types/chromecast-caf-receiver@npm:6.0.22"
-  checksum: 10/6c51cb52527776ddfa187a261b88184c98bdd61c129dd8719cba213894d565cf69073734d6473696ffd60a768f6fb5a3fe9932693f43174fbc5e7af201db8a90
+"@types/chromecast-caf-receiver@npm:6.0.24":
+  version: 6.0.24
+  resolution: "@types/chromecast-caf-receiver@npm:6.0.24"
+  checksum: 10/1f2b95e8a15dbb36d5328895229d4a5cb255b33e62d46335bd6ed75e16aa9ea6a7d765a64ae120d19b3134fb3e51e9547d2544c7277f7bffe0bf0b3999f026da
   languageName: node
   linkType: hard
 
@@ -9385,7 +9385,7 @@ __metadata:
     "@tsparticles/engine": "npm:3.9.1"
     "@tsparticles/preset-links": "npm:3.2.0"
     "@types/babel__plugin-transform-runtime": "npm:7.9.5"
-    "@types/chromecast-caf-receiver": "npm:6.0.22"
+    "@types/chromecast-caf-receiver": "npm:6.0.24"
     "@types/chromecast-caf-sender": "npm:1.0.11"
     "@types/color-name": "npm:2.0.0"
     "@types/culori": "npm:4.0.0"