review

src/components/ha-vacuum-segment-area-mapper.ts

@@ -1,14 +1,15 @@
-import "@material/mwc-list/mwc-list-item";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { Segment } from "../data/vacuum";
 import { getVacuumSegments } from "../data/vacuum";
+import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
 import "./ha-area-picker";
-import { haStyle } from "../resources/styles";
+import "./ha-md-list";
+import "./ha-md-list-item";
 
 type AreaSegmentMapping = Record<string, string[]>; // area ID -> segment IDs
 
@@ -66,7 +67,11 @@ export class HaVacuumSegmentAreaMapper extends LitElement {
 
     if (!this._segments || this._segments.length === 0) {
       return html`
-        <ha-alert alert-type="info"> No segments available </ha-alert>
+        <ha-alert alert-type="info">
+          ${this.hass.localize(
+            "ui.dialogs.vacuum_segment_mapping.no_segments"
+          )}
+        </ha-alert>
       `;
     }
 
@@ -109,8 +114,9 @@ export class HaVacuumSegmentAreaMapper extends LitElement {
           slot="end"
           .hass=${this.hass}
           .value=${mappedAreas}
-          .label=${"Area"}
-          allow-custom-entity
+          .label=${this.hass.localize(
+            "ui.dialogs.vacuum_segment_mapping.area_label"
+          )}
           @value-changed=${this._handleAreaChanged}
           data-segment-id=${segment.id}
         ></ha-area-picker>

src/dialogs/more-info/components/vacuum/ha-more-info-view-vacuum-segment-mapping.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../components/ha-button";
+import "../../../../components/ha-spinner";
 import "../../../../components/ha-vacuum-segment-area-mapper";
 import type { HaVacuumSegmentAreaMapper } from "../../../../components/ha-vacuum-segment-area-mapper";
 import type {

src/dialogs/more-info/components/vacuum/show-view-vacuum-segment-mapping.ts

@@ -1,16 +1,18 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
 
 export const loadVacuumSegmentMappingView = () =>
   import("./ha-more-info-view-vacuum-segment-mapping");
 
 export const showVacuumSegmentMappingView = (
   element: HTMLElement,
+  localize: LocalizeFunc,
   entityId: string
 ): void => {
   fireEvent(element, "show-child-view", {
     viewTag: "ha-more-info-view-vacuum-segment-mapping",
     viewImport: loadVacuumSegmentMappingView,
-    viewTitle: "Map vacuum segments to areas",
+    viewTitle: localize("ui.dialogs.vacuum_segment_mapping.title"),
     viewParams: { entityId },
   });
 };

src/panels/config/entities/dialogs/dialog-vacuum-segment-mapping.ts

@@ -29,10 +29,7 @@ import {
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-
-export interface VacuumSegmentMappingDialogParams {
-  entityId: string;
-}
+import type { VacuumSegmentMappingDialogParams } from "./show-dialog-vacuum-segment-mapping";
 
 @customElement("dialog-vacuum-segment-mapping")
 export class DialogVacuumSegmentMapping
@@ -161,7 +158,9 @@ export class DialogVacuumSegmentMapping
         .hass=${this.hass}
         .open=${this._open}
         @closed=${this._dialogClosed}
-        header-title="Map vacuum segments to areas"
+        .headerTitle=${this.hass.localize(
+          "ui.dialogs.vacuum_segment_mapping.title"
+        )}
         .headerSubtitle=${breadcrumb.join(
           computeRTL(this.hass) ? " ◂ " : " ▸ "
         )}

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -938,9 +938,15 @@ export class EntityRegistrySettingsEditor extends LitElement {
               .disabled=${this.disabled}
               @click=${this._handleVacuumSegmentMappingClicked}
             >
-              <span>Map vacuum segments to areas</span>
+              <span
+                >${this.hass.localize(
+                  "ui.dialogs.vacuum_segment_mapping.title"
+                )}</span
+              >
               <span slot="secondary">
-                Configure which areas each vacuum segment should clean
+                ${this.hass.localize(
+                  "ui.dialogs.vacuum_segment_mapping.description"
+                )}
               </span>
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
@@ -1534,7 +1540,11 @@ export class EntityRegistrySettingsEditor extends LitElement {
   }
 
   private _handleVacuumSegmentMappingClicked() {
-    showVacuumSegmentMappingView(this, this.entry.entity_id);
+    showVacuumSegmentMappingView(
+      this,
+      this.hass.localize,
+      this.entry.entity_id
+    );
   }
 
   private async _showOptionsFlow() {

src/translations/en.json

@@ -1359,7 +1359,10 @@
     },
     "dialogs": {
       "vacuum_segment_mapping": {
-        "title": "Map vacuum segments to areas"
+        "title": "Map vacuum segments to areas",
+        "no_segments": "No segments available",
+        "area_label": "Area",
+        "description": "Configure which areas each vacuum segment should clean"
       },
       "safe_mode": {
         "title": "Safe mode",