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/components/ha-automation-row.ts

@@ -25,8 +25,6 @@ export class HaAutomationRow extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "building-block" })
   public buildingBlock = false;
 
-  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
-
   @query(".row")
   private _rowElement?: HTMLDivElement;
 
@@ -170,20 +168,9 @@ export class HaAutomationRow extends LitElement {
       margin: 0 12px;
     }
     :host([sort-selected]) .row {
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
-    }
-    .row:hover {
-      background-color: rgba(var(--rgb-primary-text-color), 0.04);
-    }
-    :host([highlight]) .row {
-      background-color: rgba(var(--rgb-primary-color), 0.08);
-    }
-    :host([highlight]) .row:hover {
-      background-color: rgba(var(--rgb-primary-color), 0.16);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
     }
   `;
 }

src/components/ha-items-display-editor.ts

@@ -393,13 +393,10 @@ export class HaItemDisplayEditor extends LitElement {
       --md-list-item-one-line-container-height: 48px;
     }
     ha-md-list-item.drag-selected {
-      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
       border-radius: 8px;
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
     }
     ha-md-list-item ha-icon-button {
       margin-left: -12px;

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -151,8 +151,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -449,7 +447,6 @@ export default class HaAutomationActionRow extends LitElement {
                 ))}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              .highlight=${this.highlight}
               @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,

src/panels/config/automation/action/ha-automation-action.ts

@@ -97,7 +97,7 @@ export default class HaAutomationAction extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._actionChanged}
                 .hass=${this.hass}
-                .highlight=${this.highlightedActions?.includes(action)}
+                ?highlight=${this.highlightedActions?.includes(action)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -116,8 +116,6 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @property({ type: Boolean, attribute: "sort-selected" })
   public sortSelected = false;
 
@@ -357,7 +355,6 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
-              .highlight=${this.highlight}
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -175,7 +175,7 @@ export default class HaAutomationCondition extends LitElement {
                 @move-up=${this._moveUp}
                 @value-changed=${this._conditionChanged}
                 .hass=${this.hass}
-                .highlight=${this.highlightedConditions?.includes(cond)}
+                ?highlight=${this.highlightedConditions?.includes(cond)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

src/panels/config/automation/styles.ts

@@ -37,6 +37,12 @@ export const rowStyles = css`
   ha-tooltip {
     cursor: default;
   }
+  :host([highlight]) ha-card {
+    --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+    --shadow-focus: 0 0 0 1px var(--state-inactive-color);
+    border-color: var(--state-inactive-color);
+    box-shadow: var(--shadow-default), var(--shadow-focus);
+  }
   .hidden {
     display: none;
   }

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -113,8 +113,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @property({ type: Boolean }) public last?: boolean;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
@@ -351,7 +349,6 @@ export default class HaAutomationTriggerRow extends LitElement {
               this.trigger.enabled === false}
               @click=${this._toggleSidebar}
               .selected=${this._selected}
-              .highlight=${this.highlight}
               .sortSelected=${this.sortSelected}
               >${this._selected
                 ? "selected"

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -92,7 +92,7 @@ export default class HaAutomationTrigger extends LitElement {
                 .hass=${this.hass}
                 .disabled=${this.disabled}
                 .narrow=${this.narrow}
-                .highlight=${this.highlightedTriggers?.includes(trg)}
+                ?highlight=${this.highlightedTriggers?.includes(trg)}
                 .optionsInSidebar=${this.optionsInSidebar}
                 .sortSelected=${this._rowSortSelected === idx}
                 @stop-sort-selection=${this._stopSortSelection}

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/config/script/ha-script-field-row.ts

@@ -32,8 +32,6 @@ export default class HaScriptFieldRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean }) public highlight?: boolean;
-
   @state() private _yamlMode = false;
 
   @state() private _selected = false;
@@ -63,7 +61,6 @@ export default class HaScriptFieldRow extends LitElement {
           left-chevron
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
-          .highlight=${this.highlight}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -86,7 +83,6 @@ export default class HaScriptFieldRow extends LitElement {
             .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
               Object.keys(this.field.selector)[0]
             )}
-            .highlight=${this.highlight}
           >
             <h3 slot="header">
               ${this.hass.localize(
@@ -335,6 +331,13 @@ export default class HaScriptFieldRow extends LitElement {
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }
+        :host([highlight]) ha-card {
+          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+          --shadow-focus: 0 0 0 1px var(--state-inactive-color);
+          border-color: var(--state-inactive-color);
+          box-shadow: var(--shadow-default), var(--shadow-focus);
+        }
+
         .selector-row {
           padding: 12px 0 16px 16px;
         }

src/panels/config/script/ha-script-fields.ts

@@ -43,7 +43,7 @@ export default class HaScriptFields extends LitElement {
                   .disabled=${this.disabled}
                   @value-changed=${this._fieldChanged}
                   .hass=${this.hass}
-                  .highlight=${this.highlightedFields?.[key] !== undefined}
+                  ?highlight=${this.highlightedFields?.[key] !== undefined}
                   .narrow=${this.narrow}
                 >
                 </ha-script-field-row>

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"