+ ${item.domain_name}
+
+ `
+ : nothing}
+
- ${!this._opened
+
+ ${item.icon_path
? html`
-
- ${this._renderContent()}
-
+
+ : item.stateObj
+ ? html`
+
-
{
if (this._audioBuffer) {
@@ -293,27 +295,36 @@ export class HaAssistChat extends LitElement {
await this._audioRecorder.start();
this._addMessage(userMessage);
- this.requestUpdate("_audioRecorder");
- let continueConversation = false;
- let hassMessage = {
- who: "hass",
- text: "…",
- error: false,
- };
- let currentDeltaRole = "";
- // To make sure the answer is placed at the right user text, we add it before we process it
+ const hassMessageProcesser = this._createAddHassMessageProcessor();
+
try {
const unsub = await runAssistPipeline(
this.hass,
- (event) => {
+ (event: PipelineRunEvent) => {
if (event.type === "run-start") {
this._stt_binary_handler_id =
event.data.runner_data.stt_binary_handler_id;
+ this._audio = new Audio(event.data.tts_output!.url);
+ this._audio.play();
+ this._audio.addEventListener("ended", () => {
+ this._unloadAudio();
+ if (hassMessageProcesser.continueConversation) {
+ this._startListening();
+ }
+ });
+ this._audio.addEventListener("pause", this._unloadAudio);
+ this._audio.addEventListener("canplaythrough", () =>
+ this._audio?.play()
+ );
+ this._audio.addEventListener("error", () => {
+ this._unloadAudio();
+ showAlertDialog(this, { title: "Error playing audio." });
+ });
}
// When we start STT stage, the WS has a binary handler
- if (event.type === "stt-start" && this._audioBuffer) {
+ else if (event.type === "stt-start" && this._audioBuffer) {
// Send the buffer over the WS to the STT engine.
for (const buffer of this._audioBuffer) {
this._sendAudioChunk(buffer);
@@ -322,91 +333,26 @@ export class HaAssistChat extends LitElement {
}
// Stop recording if the server is done with STT stage
- if (event.type === "stt-end") {
+ else if (event.type === "stt-end") {
this._stt_binary_handler_id = undefined;
this._stopListening();
userMessage.text = event.data.stt_output.text;
this.requestUpdate("_conversation");
- // To make sure the answer is placed at the right user text, we add it before we process it
- this._addMessage(hassMessage);
- }
-
- if (event.type === "intent-progress") {
- const delta = event.data.chat_log_delta;
-
- // new message
- if (delta.role) {
- // If currentDeltaRole exists, it means we're receiving our
- // second or later message. Let's add it to the chat.
- if (currentDeltaRole && delta.role && hassMessage.text !== "…") {
- // Remove progress indicator of previous message
- hassMessage.text = hassMessage.text.substring(
- 0,
- hassMessage.text.length - 1
- );
-
- hassMessage = {
- who: "hass",
- text: "…",
- error: false,
- };
- this._addMessage(hassMessage);
- }
- currentDeltaRole = delta.role;
- }
-
- if (
- currentDeltaRole === "assistant" &&
- "content" in delta &&
- delta.content
- ) {
- hassMessage.text =
- hassMessage.text.substring(0, hassMessage.text.length - 1) +
- delta.content +
- "…";
- this.requestUpdate("_conversation");
- }
- }
-
- if (event.type === "intent-end") {
- this._conversationId = event.data.intent_output.conversation_id;
- continueConversation =
- event.data.intent_output.continue_conversation;
- const plain = event.data.intent_output.response.speech?.plain;
- if (plain) {
- hassMessage.text = plain.speech;
- }
- this.requestUpdate("_conversation");
- }
-
- if (event.type === "tts-end") {
- const url = event.data.tts_output.url;
- this._audio = new Audio(url);
- this._audio.play();
- this._audio.addEventListener("ended", () => {
- this._unloadAudio();
- if (continueConversation) {
- this._startListening();
- }
- });
- this._audio.addEventListener("pause", this._unloadAudio);
- this._audio.addEventListener("canplaythrough", this._playAudio);
- this._audio.addEventListener("error", this._audioError);
- }
-
- if (event.type === "run-end") {
+ // Add the response message placeholder to the chat when we know the STT is done
+ hassMessageProcesser.addMessage();
+ } else if (event.type.startsWith("intent-")) {
+ hassMessageProcesser.processEvent(event);
+ } else if (event.type === "run-end") {
this._stt_binary_handler_id = undefined;
unsub();
- }
-
- if (event.type === "error") {
+ } else if (event.type === "error") {
+ this._unloadAudio();
this._stt_binary_handler_id = undefined;
if (userMessage.text === "…") {
userMessage.text = event.data.message;
userMessage.error = true;
} else {
- hassMessage.text = event.data.message;
- hassMessage.error = true;
+ hassMessageProcesser.setError(event.data.message);
}
this._stopListening();
this.requestUpdate("_conversation");
@@ -464,90 +410,33 @@ export class HaAssistChat extends LitElement {
this.hass.connection.socket!.send(data);
}
- private _playAudio = () => {
- this._audio?.play();
- };
-
- private _audioError = () => {
- showAlertDialog(this, { title: "Error playing audio." });
- this._audio?.removeAttribute("src");
- };
-
private _unloadAudio = () => {
- this._audio?.removeAttribute("src");
+ if (!this._audio) {
+ return;
+ }
+ this._audio.pause();
+ this._audio.removeAttribute("src");
this._audio = undefined;
};
private async _processText(text: string) {
+ this._unloadAudio();
this._processing = true;
- this._audio?.pause();
this._addMessage({ who: "user", text });
- let hassMessage = {
- who: "hass",
- text: "…",
- error: false,
- };
- let currentDeltaRole = "";
- // To make sure the answer is placed at the right user text, we add it before we process it
- this._addMessage(hassMessage);
+ const hassMessageProcesser = this._createAddHassMessageProcessor();
+ hassMessageProcesser.addMessage();
try {
const unsub = await runAssistPipeline(
this.hass,
(event) => {
- if (event.type === "intent-progress") {
- const delta = event.data.chat_log_delta;
-
- // new message and previous message has content
- if (delta.role) {
- // If currentDeltaRole exists, it means we're receiving our
- // second or later message. Let's add it to the chat.
- if (
- currentDeltaRole &&
- delta.role === "assistant" &&
- hassMessage.text !== "…"
- ) {
- // Remove progress indicator of previous message
- hassMessage.text = hassMessage.text.substring(
- 0,
- hassMessage.text.length - 1
- );
-
- hassMessage = {
- who: "hass",
- text: "…",
- error: false,
- };
- this._addMessage(hassMessage);
- }
- currentDeltaRole = delta.role;
- }
-
- if (
- currentDeltaRole === "assistant" &&
- "content" in delta &&
- delta.content
- ) {
- hassMessage.text =
- hassMessage.text.substring(0, hassMessage.text.length - 1) +
- delta.content +
- "…";
- this.requestUpdate("_conversation");
- }
+ if (event.type.startsWith("intent-")) {
+ hassMessageProcesser.processEvent(event);
}
-
if (event.type === "intent-end") {
- this._conversationId = event.data.intent_output.conversation_id;
- const plain = event.data.intent_output.response.speech?.plain;
- if (plain) {
- hassMessage.text = plain.speech;
- }
- this.requestUpdate("_conversation");
unsub();
}
if (event.type === "error") {
- hassMessage.text = event.data.message;
- hassMessage.error = true;
- this.requestUpdate("_conversation");
+ hassMessageProcesser.setError(event.data.message);
unsub();
}
},
@@ -560,20 +449,126 @@ export class HaAssistChat extends LitElement {
}
);
} catch {
- hassMessage.text = this.hass.localize("ui.dialogs.voice_command.error");
- hassMessage.error = true;
- this.requestUpdate("_conversation");
+ hassMessageProcesser.setError(
+ this.hass.localize("ui.dialogs.voice_command.error")
+ );
} finally {
this._processing = false;
}
}
+ private _createAddHassMessageProcessor() {
+ let currentDeltaRole = "";
+
+ const progressToNextMessage = () => {
+ if (progress.hassMessage.text === "…") {
+ return;
+ }
+ progress.hassMessage.text = progress.hassMessage.text.substring(
+ 0,
+ progress.hassMessage.text.length - 1
+ );
+
+ progress.hassMessage = {
+ who: "hass",
+ text: "…",
+ error: false,
+ };
+ this._addMessage(progress.hassMessage);
+ };
+
+ const isAssistantDelta = (
+ _delta: any
+ ): _delta is Partial =>
+ currentDeltaRole === "assistant";
+
+ const isToolResult = (
+ _delta: any
+ ): _delta is ConversationChatLogToolResultDelta =>
+ currentDeltaRole === "tool_result";
+
+ const tools: Record<
+ string,
+ ConversationChatLogAssistantDelta["tool_calls"][0]
+ > = {};
+
+ const progress = {
+ continueConversation: false,
+ hassMessage: {
+ who: "hass",
+ text: "…",
+ error: false,
+ },
+ addMessage: () => {
+ this._addMessage(progress.hassMessage);
+ },
+ setError: (error: string) => {
+ progressToNextMessage();
+ progress.hassMessage.text = error;
+ progress.hassMessage.error = true;
+ this.requestUpdate("_conversation");
+ },
+ processEvent: (event: PipelineRunEvent) => {
+ if (event.type === "intent-progress") {
+ const delta = event.data.chat_log_delta;
+
+ // new message
+ if (delta.role) {
+ progressToNextMessage();
+ currentDeltaRole = delta.role;
+ }
+
+ if (isAssistantDelta(delta)) {
+ if (delta.content) {
+ progress.hassMessage.text =
+ progress.hassMessage.text.substring(
+ 0,
+ progress.hassMessage.text.length - 1
+ ) +
+ delta.content +
+ "…";
+ this.requestUpdate("_conversation");
+ }
+ if (delta.tool_calls) {
+ for (const toolCall of delta.tool_calls) {
+ tools[toolCall.id] = toolCall;
+ }
+ }
+ } else if (isToolResult(delta)) {
+ if (tools[delta.tool_call_id]) {
+ delete tools[delta.tool_call_id];
+ }
+ }
+ } else if (event.type === "intent-end") {
+ this._conversationId = event.data.intent_output.conversation_id;
+ progress.continueConversation =
+ event.data.intent_output.continue_conversation;
+ const response =
+ event.data.intent_output.response.speech?.plain.speech;
+ if (!response) {
+ return;
+ }
+ if (event.data.intent_output.response.response_type === "error") {
+ progress.setError(response);
+ } else {
+ progress.hassMessage.text = response;
+ this.requestUpdate("_conversation");
+ }
+ }
+ },
+ };
+ return progress;
+ }
+
static styles = css`
:host {
flex: 1;
display: flex;
flex-direction: column;
}
+ ha-alert {
+ margin-bottom: 8px;
+ }
ha-textfield {
display: block;
}
@@ -581,17 +576,14 @@ export class HaAssistChat extends LitElement {
flex: 1;
display: block;
box-sizing: border-box;
- position: relative;
- }
- .messages-container {
- position: absolute;
- bottom: 0px;
- right: 0px;
- left: 0px;
- padding: 0px 10px 16px;
- box-sizing: border-box;
overflow-y: auto;
max-height: 100%;
+ display: flex;
+ flex-direction: column;
+ padding: 0 12px 16px;
+ }
+ .spacer {
+ flex: 1;
}
.message {
white-space: pre-line;
@@ -601,6 +593,9 @@ export class HaAssistChat extends LitElement {
padding: 8px;
border-radius: 15px;
}
+ .message:last-child {
+ margin-bottom: 0;
+ }
@media all and (max-width: 450px), all and (max-height: 500px) {
.message {
@@ -619,7 +614,7 @@ export class HaAssistChat extends LitElement {
margin-left: 24px;
margin-inline-start: 24px;
margin-inline-end: initial;
- float: var(--float-end);
+ align-self: flex-end;
text-align: right;
border-bottom-right-radius: 0px;
background-color: var(--chat-background-color-user, var(--primary-color));
@@ -631,7 +626,7 @@ export class HaAssistChat extends LitElement {
margin-right: 24px;
margin-inline-end: 24px;
margin-inline-start: initial;
- float: var(--float-start);
+ align-self: flex-start;
border-bottom-left-radius: 0px;
background-color: var(
--chat-background-color-hass,
diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 51aab0e0f1..eae4ccc306 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -81,27 +81,27 @@ export class HaBaseTimeInput extends LitElement {
/**
* Label for the day input
*/
- @property({ attribute: false }) dayLabel = "";
+ @property({ type: String, attribute: "day-label" }) dayLabel = "";
/**
* Label for the hour input
*/
- @property({ attribute: false }) hourLabel = "";
+ @property({ type: String, attribute: "hour-label" }) hourLabel = "";
/**
* Label for the min input
*/
- @property({ attribute: false }) minLabel = "";
+ @property({ type: String, attribute: "min-label" }) minLabel = "";
/**
* Label for the sec input
*/
- @property({ attribute: false }) secLabel = "";
+ @property({ type: String, attribute: "sec-label" }) secLabel = "";
/**
* Label for the milli sec input
*/
- @property({ attribute: false }) millisecLabel = "";
+ @property({ type: String, attribute: "ms-label" }) millisecLabel = "";
/**
* show the sec field
@@ -342,7 +342,7 @@ export class HaBaseTimeInput extends LitElement {
padding-right: 3px;
}
ha-textfield {
- width: 55px;
+ width: 60px;
flex-grow: 1;
text-align: center;
--mdc-shape-small: 0;
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 64d5565cc8..933a70efef 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
- padding: 12px 24px max(env(safe-area-inset-bottom), 12px) 24px;
+ padding: 12px 24px max(var(--safe-area-inset-bottom), 12px) 24px;
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
@@ -117,7 +117,7 @@ export class HaDialog extends DialogBase {
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 24px),
- env(safe-area-inset-bottom)
+ var(--safe-area-inset-bottom)
);
}
.mdc-dialog .mdc-dialog__surface {
diff --git a/src/components/ha-duration-input.ts b/src/components/ha-duration-input.ts
index 9620db7b50..7a4416c422 100644
--- a/src/components/ha-duration-input.ts
+++ b/src/components/ha-duration-input.ts
@@ -52,11 +52,11 @@ class HaDurationInput extends LitElement {
.milliseconds=${this._milliseconds}
@value-changed=${this._durationChanged}
no-hours-limit
- dayLabel="dd"
- hourLabel="hh"
- minLabel="mm"
- secLabel="ss"
- millisecLabel="ms"
+ day-label="dd"
+ hour-label="hh"
+ min-label="mm"
+ sec-label="ss"
+ ms-label="ms"
>
`;
}
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index 931831d9d7..179ae51386 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -202,6 +202,7 @@ export class HaExpansionPanel extends LitElement {
.header,
::slotted([slot="header"]) {
flex: 1;
+ overflow-wrap: anywhere;
}
.container {
diff --git a/src/components/ha-floor-picker.ts b/src/components/ha-floor-picker.ts
index 4107aadc2c..84617c46e4 100644
--- a/src/components/ha-floor-picker.ts
+++ b/src/components/ha-floor-picker.ts
@@ -1,14 +1,13 @@
+import { mdiPlus, mdiTextureBox } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain";
-import type { ScorableTextItem } from "../common/string/filter/sequence-matching";
-import { fuzzyFilterSort } from "../common/string/filter/sequence-matching";
-import type { AreaRegistryEntry } from "../data/area_registry";
+import { computeFloorName } from "../common/entity/compute_floor_name";
import { updateAreaRegistryEntry } from "../data/area_registry";
import type {
DeviceEntityDisplayLookup,
@@ -16,33 +15,29 @@ import type {
} from "../data/device_registry";
import { getDeviceEntityDisplayLookup } from "../data/device_registry";
import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import type { FloorRegistryEntry } from "../data/floor_registry";
import {
createFloorRegistryEntry,
getFloorAreaLookup,
+ type FloorRegistryEntry,
} from "../data/floor_registry";
import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
import type { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-floor-icon";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
import "./ha-icon-button";
-
-type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import type { PickerValueRenderer } from "./ha-picker-field";
+import "./ha-svg-icon";
const ADD_NEW_ID = "___ADD_NEW___";
-const NO_FLOORS_ID = "___NO_FLOORS___";
-const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
-const rowRenderer: ComboBoxLitRenderer = (item) => html`
-
-
-`;
+interface FloorComboBoxItem extends PickerComboBoxItem {
+ floor?: FloorRegistryEntry;
+}
@customElement("ha-floor-picker")
export class HaFloorPicker extends LitElement {
@@ -88,7 +83,7 @@ export class HaFloorPicker extends LitElement {
* @type {Array}
* @attr exclude-floors
*/
- @property({ type: Array, attribute: "exclude-floor" })
+ @property({ type: Array, attribute: "exclude-floors" })
public excludeFloors?: string[];
@property({ attribute: false })
@@ -101,38 +96,53 @@ export class HaFloorPicker extends LitElement {
@property({ type: Boolean }) public required = false;
- @state() private _opened?: boolean;
-
- @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
- private _suggestion?: string;
-
- private _init = false;
+ @query("ha-generic-picker") private _picker?: HaGenericPicker;
public async open() {
await this.updateComplete;
- await this.comboBox?.open();
+ await this._picker?.open();
}
- public async focus() {
- await this.updateComplete;
- await this.comboBox?.focus();
- }
+ // Recompute value renderer when the areas change
+ private _computeValueRenderer = memoizeOne(
+ (_haAreas: HomeAssistant["floors"]): PickerValueRenderer =>
+ (value) => {
+ const floor = this.hass.floors[value];
+
+ if (!floor) {
+ return html`
+ ((floor) => {
+ const floorName = computeFloorName(floor);
+ return {
+ id: floor.floor_id,
+ primary: floorName,
+ floor: floor,
+ sorting_label: floor.level?.toString() || "zzzzz",
+ search_labels: [floorName, floor.floor_id, ...floor.aliases].filter(
+ (v): v is string => Boolean(v)
+ ),
+ };
+ });
- return noAdd
- ? outputFloors
- : [
- ...outputFloors,
- {
- floor_id: ADD_NEW_ID,
- name: this.hass.localize("ui.components.floor-picker.add_new"),
- icon: "mdi:plus",
- level: null,
- aliases: [],
- created_at: 0,
- modified_at: 0,
- },
- ];
+ return items;
}
);
- protected updated(changedProps: PropertyValues) {
- if (
- (!this._init && this.hass) ||
- (this._init && changedProps.has("_opened") && this._opened)
- ) {
- this._init = true;
- const floors = this._getFloors(
- Object.values(this.hass.floors),
- Object.values(this.hass.areas),
- Object.values(this.hass.devices),
- Object.values(this.hass.entities),
- this.includeDomains,
- this.excludeDomains,
- this.includeDeviceClasses,
- this.deviceFilter,
- this.entityFilter,
- this.noAdd,
- this.excludeFloors
- ).map((floor) => ({
- ...floor,
- strings: [floor.floor_id, floor.name, ...floor.aliases],
- }));
- this.comboBox.items = floors;
- this.comboBox.filteredItems = floors;
+ private _rowRenderer: ComboBoxLitRenderer = (item) => html`
+
+ ${item.icon_path
+ ? html`
+
+ `;
+
+ private _getItems = () =>
+ this._getFloors(
+ this.hass.floors,
+ this.hass.areas,
+ this.hass.devices,
+ this.hass.entities,
+ this.includeDomains,
+ this.excludeDomains,
+ this.includeDeviceClasses,
+ this.deviceFilter,
+ this.entityFilter,
+ this.excludeFloors
+ );
+
+ private _allFloorNames = memoizeOne(
+ (floors: HomeAssistant["floors"]) =>
+ Object.values(floors)
+ .map((floor) => computeFloorName(floor)?.toLowerCase())
+ .filter(Boolean) as string[]
+ );
+
+ private _getAdditionalItems = (
+ searchString?: string
+ ): PickerComboBoxItem[] => {
+ if (this.noAdd) {
+ return [];
}
- }
+
+ const allFloors = this._allFloorNames(this.hass.floors);
+
+ if (searchString && !allFloors.includes(searchString.toLowerCase())) {
+ return [
+ {
+ id: ADD_NEW_ID + searchString,
+ primary: this.hass.localize(
+ "ui.components.floor-picker.add_new_sugestion",
+ {
+ name: searchString,
+ }
+ ),
+ icon_path: mdiPlus,
+ },
+ ];
+ }
+
+ return [
+ {
+ id: ADD_NEW_ID,
+ primary: this.hass.localize("ui.components.floor-picker.add_new"),
+ icon_path: mdiPlus,
+ },
+ ];
+ };
protected render(): TemplateResult {
+ const placeholder =
+ this.placeholder ??
+ this.hass.localize("ui.components.floor-picker.floor");
+
+ const valueRenderer = this._computeValueRenderer(this.hass.floors);
+
return html`
-
-
+
`;
}
- private _filterChanged(ev: CustomEvent): void {
- const target = ev.target as HaComboBox;
- const filterString = ev.detail.value;
- if (!filterString) {
- this.comboBox.filteredItems = this.comboBox.items;
- return;
- }
-
- const filteredItems = fuzzyFilterSort(
- filterString,
- target.items?.filter(
- (item) => ![NO_FLOORS_ID, ADD_NEW_ID].includes(item.label_id)
- ) || []
- );
- if (filteredItems.length === 0) {
- if (this.noAdd) {
- this.comboBox.filteredItems = [
- {
- floor_id: NO_FLOORS_ID,
- name: this.hass.localize("ui.components.floor-picker.no_match"),
- icon: null,
- level: null,
- aliases: [],
- created_at: 0,
- modified_at: 0,
- },
- ] as FloorRegistryEntry[];
- } else {
- this._suggestion = filterString;
- this.comboBox.filteredItems = [
- {
- floor_id: ADD_NEW_SUGGESTION_ID,
- name: this.hass.localize(
- "ui.components.floor-picker.add_new_sugestion",
- { name: this._suggestion }
- ),
- icon: "mdi:plus",
- level: null,
- aliases: [],
- created_at: 0,
- modified_at: 0,
- },
- ] as FloorRegistryEntry[];
- }
- } else {
- this.comboBox.filteredItems = filteredItems;
- }
- }
-
- private get _value() {
- return this.value || "";
- }
-
- private _openedChanged(ev: ValueChangedEvent) {
- this._opened = ev.detail.value;
- }
-
- private _floorChanged(ev: ValueChangedEvent) {
+ private _valueChanged(ev: ValueChangedEvent) {
ev.stopPropagation();
- let newValue = ev.detail.value;
+ const value = ev.detail.value;
- if (newValue === NO_FLOORS_ID) {
- newValue = "";
- this.comboBox.setInputValue("");
+ if (!value) {
+ this._setValue(undefined);
return;
}
- if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
- if (newValue !== this._value) {
- this._setValue(newValue);
- }
- return;
- }
+ if (value.startsWith(ADD_NEW_ID)) {
+ this.hass.loadFragmentTranslation("config");
- (ev.target as any).value = this._value;
+ const suggestedName = value.substring(ADD_NEW_ID.length);
- this.hass.loadFragmentTranslation("config");
-
- showFloorRegistryDetailDialog(this, {
- suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
- createEntry: async (values, addedAreas) => {
- try {
- const floor = await createFloorRegistryEntry(this.hass, values);
- addedAreas.forEach((areaId) => {
- updateAreaRegistryEntry(this.hass, areaId, {
- floor_id: floor.floor_id,
+ showFloorRegistryDetailDialog(this, {
+ suggestedName: suggestedName,
+ createEntry: async (values, addedAreas) => {
+ try {
+ const floor = await createFloorRegistryEntry(this.hass, values);
+ addedAreas.forEach((areaId) => {
+ updateAreaRegistryEntry(this.hass, areaId, {
+ floor_id: floor.floor_id,
+ });
});
- });
- const floors = [...Object.values(this.hass.floors), floor];
- this.comboBox.filteredItems = this._getFloors(
- floors,
- Object.values(this.hass.areas)!,
- Object.values(this.hass.devices)!,
- Object.values(this.hass.entities)!,
- this.includeDomains,
- this.excludeDomains,
- this.includeDeviceClasses,
- this.deviceFilter,
- this.entityFilter,
- this.noAdd,
- this.excludeFloors
- );
- await this.updateComplete;
- await this.comboBox.updateComplete;
- this._setValue(floor.floor_id);
- } catch (err: any) {
- showAlertDialog(this, {
- title: this.hass.localize(
- "ui.components.floor-picker.failed_create_floor"
- ),
- text: err.message,
- });
- }
- },
- });
+ this._setValue(floor.floor_id);
+ } catch (err: any) {
+ showAlertDialog(this, {
+ title: this.hass.localize(
+ "ui.components.floor-picker.failed_create_floor"
+ ),
+ text: err.message,
+ });
+ }
+ },
+ });
+ }
- this._suggestion = undefined;
- this.comboBox.setInputValue("");
+ this._setValue(value);
}
private _setValue(value?: string) {
this.value = value;
- setTimeout(() => {
- fireEvent(this, "value-changed", { value });
- fireEvent(this, "change");
- }, 0);
+ fireEvent(this, "value-changed", { value });
+ fireEvent(this, "change");
}
}
diff --git a/src/components/ha-items-display-editor.ts b/src/components/ha-items-display-editor.ts
index af7fb2ba1f..d0e1319be0 100644
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -25,6 +25,7 @@ export interface DisplayItem {
value: string;
label: string;
description?: string;
+ disableSorting?: boolean;
}
export interface DisplayValue {
@@ -50,6 +51,9 @@ export class HaItemDisplayEditor extends LitElement {
@property({ type: Boolean, attribute: "show-navigation-button" })
public showNavigationButton = false;
+ @property({ type: Boolean, attribute: "dont-sort-visible" })
+ public dontSortVisible = false;
+
@property({ attribute: false })
public value: DisplayValue = {
order: [],
@@ -122,9 +126,15 @@ export class HaItemDisplayEditor extends LitElement {
private _visibleItems = memoizeOne(
(items: DisplayItem[], hidden: string[], order: string[]) => {
const compare = orderCompare(order);
- return items
- .filter((item) => !hidden.includes(item.value))
- .sort((a, b) => compare(a.value, b.value));
+
+ const visibleItems = items.filter((item) => !hidden.includes(item.value));
+ if (this.dontSortVisible) {
+ return visibleItems;
+ }
+
+ return items.sort((a, b) =>
+ a.disableSorting && !b.disableSorting ? -1 : compare(a.value, b.value)
+ );
}
);
@@ -160,7 +170,14 @@ export class HaItemDisplayEditor extends LitElement {
(item) => item.value,
(item: DisplayItem, _idx) => {
const isVisible = !this.value.hidden.includes(item.value);
- const { label, value, description, icon, iconPath } = item;
+ const {
+ label,
+ value,
+ description,
+ icon,
+ iconPath,
+ disableSorting,
+ } = item;
return html`
${label}
${description
? html`${description}`
: nothing}
- ${isVisible
+ ${isVisible && !disableSorting
? html`
= (item) => html`
-
- ${item.icon
- ? html`
-`;
+const NO_LABELS = "___NO_LABELS___";
@customElement("ha-label-picker")
export class HaLabelPicker extends SubscribeMixin(LitElement) {
@@ -101,24 +88,13 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public required = false;
- @state() private _opened?: boolean;
-
@state() private _labels?: LabelRegistryEntry[];
- @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
- private _suggestion?: string;
-
- private _init = false;
+ @query("ha-generic-picker") private _picker?: HaGenericPicker;
public async open() {
await this.updateComplete;
- await this.comboBox?.open();
- }
-
- public async focus() {
- await this.updateComplete;
- await this.comboBox?.focus();
+ await this._picker?.open();
}
protected hassSubscribe(): (UnsubscribeFunc | Promise)[] {
@@ -129,20 +105,61 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
];
}
+ private _labelMap = memoizeOne(
+ (
+ labels: LabelRegistryEntry[] | undefined
+ ): Map => {
+ if (!labels) {
+ return new Map();
+ }
+ return new Map(labels.map((label) => [label.label_id, label]));
+ }
+ );
+
+ private _valueRenderer: PickerValueRenderer = (value) => {
+ const label = this._labelMap(this._labels).get(value);
+
+ if (!label) {
+ return html`
+ ((label) => ({
+ id: label.label_id,
+ primary: label.name,
+ icon: label.icon || undefined,
+ icon_path: label.icon ? undefined : mdiLabel,
+ sorting_label: label.name,
+ search_labels: [label.name, label.label_id, label.description].filter(
+ (v): v is string => Boolean(v)
+ ),
+ }));
- return noAdd
- ? outputLabels
- : [
- ...outputLabels,
- {
- label_id: ADD_NEW_ID,
- name: this.hass.localize("ui.components.label-picker.add_new"),
- icon: "mdi:plus",
- color: null,
- description: null,
- created_at: 0,
- modified_at: 0,
- },
- ];
+ return items;
}
);
- protected updated(changedProps: PropertyValues) {
- if (
- (!this._init && this.hass && this._labels) ||
- (this._init && changedProps.has("_opened") && this._opened)
- ) {
- this._init = true;
- const items = this._getLabels(
- this._labels!,
- this.hass.areas,
- Object.values(this.hass.devices),
- Object.values(this.hass.entities),
- this.includeDomains,
- this.excludeDomains,
- this.includeDeviceClasses,
- this.deviceFilter,
- this.entityFilter,
- this.noAdd,
- this.excludeLabels
- ).map((label) => ({
- ...label,
- strings: [label.label_id, label.name],
- }));
+ private _getItems = () =>
+ this._getLabels(
+ this._labels,
+ this.hass.areas,
+ this.hass.devices,
+ this.hass.entities,
+ this.includeDomains,
+ this.excludeDomains,
+ this.includeDeviceClasses,
+ this.deviceFilter,
+ this.entityFilter,
+ this.excludeLabels
+ );
- this.comboBox.items = items;
- this.comboBox.filteredItems = items;
+ private _allLabelNames = memoizeOne((labels?: LabelRegistryEntry[]) => {
+ if (!labels) {
+ return [];
}
- }
+ return [
+ ...new Set(
+ labels
+ .map((label) => label.name.toLowerCase())
+ .filter(Boolean) as string[]
+ ),
+ ];
+ });
+
+ private _getAdditionalItems = (
+ searchString?: string
+ ): PickerComboBoxItem[] => {
+ if (this.noAdd) {
+ return [];
+ }
+
+ const allLabelNames = this._allLabelNames(this._labels);
+
+ if (searchString && !allLabelNames.includes(searchString.toLowerCase())) {
+ return [
+ {
+ id: ADD_NEW_ID + searchString,
+ primary: this.hass.localize(
+ "ui.components.label-picker.add_new_sugestion",
+ {
+ name: searchString,
+ }
+ ),
+ icon_path: mdiPlus,
+ },
+ ];
+ }
+
+ return [
+ {
+ id: ADD_NEW_ID,
+ primary: this.hass.localize("ui.components.label-picker.add_new"),
+ icon_path: mdiPlus,
+ },
+ ];
+ };
protected render(): TemplateResult {
+ const placeholder =
+ this.placeholder ??
+ this.hass.localize("ui.components.label-picker.label");
+
return html`
- label.label_id === this.placeholder)
- ?.name
- : undefined}
- .renderer=${rowRenderer}
- @filter-changed=${this._filterChanged}
- @opened-changed=${this._openedChanged}
- @value-changed=${this._labelChanged}
+ .autofocus=${this.autofocus}
+ .label=${this.label}
+ .notFoundLabel=${this.hass.localize(
+ "ui.components.label-picker.no_match"
+ )}
+ .placeholder=${placeholder}
+ .value=${this.value}
+ .getItems=${this._getItems}
+ .getAdditionalItems=${this._getAdditionalItems}
+ .valueRenderer=${this._valueRenderer}
+ @value-changed=${this._valueChanged}
>
-
+
`;
}
- private _filterChanged(ev: CustomEvent): void {
- const target = ev.target as HaComboBox;
- const filterString = ev.detail.value;
- if (!filterString) {
- this.comboBox.filteredItems = this.comboBox.items;
- return;
- }
-
- const filteredItems = fuzzyFilterSort(
- filterString,
- target.items?.filter(
- (item) => ![NO_LABELS_ID, ADD_NEW_ID].includes(item.label_id)
- ) || []
- );
- if (filteredItems.length === 0) {
- if (this.noAdd) {
- this.comboBox.filteredItems = [
- {
- label_id: NO_LABELS_ID,
- name: this.hass.localize("ui.components.label-picker.no_match"),
- icon: null,
- color: null,
- },
- ] as ScorableLabelItem[];
- } else {
- this._suggestion = filterString;
- this.comboBox.filteredItems = [
- {
- label_id: ADD_NEW_SUGGESTION_ID,
- name: this.hass.localize(
- "ui.components.label-picker.add_new_sugestion",
- { name: this._suggestion }
- ),
- icon: "mdi:plus",
- color: null,
- },
- ] as ScorableLabelItem[];
- }
- } else {
- this.comboBox.filteredItems = filteredItems;
- }
- }
-
- private get _value() {
- return this.value || "";
- }
-
- private _openedChanged(ev: ValueChangedEvent) {
- this._opened = ev.detail.value;
- }
-
- private _labelChanged(ev: ValueChangedEvent) {
+ private _valueChanged(ev: ValueChangedEvent) {
ev.stopPropagation();
- let newValue = ev.detail.value;
- if (newValue === NO_LABELS_ID) {
- newValue = "";
- this.comboBox.setInputValue("");
+ const value = ev.detail.value;
+
+ if (value === NO_LABELS) {
return;
}
- if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
- if (newValue !== this._value) {
- this._setValue(newValue);
- }
+ if (!value) {
+ this._setValue(undefined);
return;
}
- (ev.target as any).value = this._value;
+ if (value.startsWith(ADD_NEW_ID)) {
+ this.hass.loadFragmentTranslation("config");
- this.hass.loadFragmentTranslation("config");
+ const suggestedName = value.substring(ADD_NEW_ID.length);
- showLabelDetailDialog(this, {
- entry: undefined,
- suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
- createEntry: async (values) => {
- const label = await createLabelRegistryEntry(this.hass, values);
- const labels = [...this._labels!, label];
- this.comboBox.filteredItems = this._getLabels(
- labels,
- this.hass.areas!,
- Object.values(this.hass.devices)!,
- Object.values(this.hass.entities)!,
- this.includeDomains,
- this.excludeDomains,
- this.includeDeviceClasses,
- this.deviceFilter,
- this.entityFilter,
- this.noAdd,
- this.excludeLabels
- );
- await this.updateComplete;
- await this.comboBox.updateComplete;
- this._setValue(label.label_id);
- return label;
- },
- });
+ showLabelDetailDialog(this, {
+ suggestedName: suggestedName,
+ createEntry: async (values) => {
+ try {
+ const label = await createLabelRegistryEntry(this.hass, values);
+ this._setValue(label.label_id);
+ } catch (err: any) {
+ showAlertDialog(this, {
+ title: this.hass.localize(
+ "ui.components.label-picker.failed_create_label"
+ ),
+ text: err.message,
+ });
+ }
+ },
+ });
+ return;
+ }
- this._suggestion = undefined;
- this.comboBox.setInputValue("");
+ this._setValue(value);
}
private _setValue(value?: string) {
diff --git a/src/components/ha-labels-picker.ts b/src/components/ha-labels-picker.ts
index 81590f3247..3d2db17271 100644
--- a/src/components/ha-labels-picker.ts
+++ b/src/components/ha-labels-picker.ts
@@ -122,6 +122,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
this.hass.locale.language
);
return html`
+ ${this.label ? html`` : nothing}
${labels?.length
? html`
${repeat(
@@ -157,9 +158,6 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
- .label=${this.label === undefined && this.hass
- ? this.hass.localize("ui.components.label-picker.add_label")
- : this.label}
.placeholder=${this.placeholder}
.excludeLabels=${this.value}
@value-changed=${this._labelChanged}
@@ -182,12 +180,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
showLabelDetailDialog(this, {
entry: label,
updateEntry: async (values) => {
- const updated = await updateLabelRegistryEntry(
- this.hass,
- label.label_id,
- values
- );
- return updated;
+ await updateLabelRegistryEntry(this.hass, label.label_id, values);
},
});
}
@@ -219,6 +212,10 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
--ha-input-chip-selected-container-opacity: 0.5;
--md-input-chip-selected-outline-width: 1px;
}
+ label {
+ display: block;
+ margin: 0 0 8px;
+ }
`;
}
diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts
index 61e6ae6a94..3aaf8e1a20 100644
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@@ -168,10 +168,10 @@ export class HaMdDialog extends Dialog {
@media all and (max-width: 450px), all and (max-height: 500px) {
:host(:not([type="alert"])) {
min-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
max-width: calc(
- 100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
+ 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
min-height: 100%;
max-height: 100%;
diff --git a/src/components/ha-picker-combo-box.ts b/src/components/ha-picker-combo-box.ts
index 95ab8fcbc6..029dfd7f31 100644
--- a/src/components/ha-picker-combo-box.ts
+++ b/src/components/ha-picker-combo-box.ts
@@ -212,6 +212,10 @@ export class HaPickerComboBox extends LitElement {
this.comboBox.setTextFieldValue("");
const newValue = ev.detail.value?.trim();
+ if (newValue === NO_MATCHING_ITEMS_FOUND_ID) {
+ return;
+ }
+
if (newValue !== this._value) {
this._setValue(newValue);
}
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 15205ad2fa..64476ae81a 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -1,11 +1,9 @@
-import "@material/mwc-button/mwc-button";
import {
mdiBell,
mdiCalendar,
mdiCellphoneCog,
mdiChartBox,
mdiClipboardList,
- mdiClose,
mdiCog,
mdiFormatListBulletedType,
mdiHammer,
@@ -13,12 +11,11 @@ import {
mdiMenu,
mdiMenuOpen,
mdiPlayBoxMultiple,
- mdiPlus,
mdiTooltipAccount,
mdiViewDashboard,
} from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { CSSResult, CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import {
customElement,
@@ -29,7 +26,6 @@ import {
} from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
-import { storage } from "../common/decorators/storage";
import { fireEvent } from "../common/dom/fire_event";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { stringCompare } from "../common/string/compare";
@@ -40,6 +36,7 @@ import { subscribeNotifications } from "../data/persistent_notification";
import { subscribeRepairsIssueRegistry } from "../data/repairs";
import type { UpdateEntity } from "../data/update";
import { updateCanInstall } from "../data/update";
+import { showEditSidebarDialog } from "../dialogs/sidebar/show-dialog-edit-sidebar";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
import { haStyleScrollbar } from "../resources/styles";
@@ -49,8 +46,6 @@ import "./ha-icon-button";
import "./ha-md-list";
import "./ha-md-list-item";
import type { HaMdListItem } from "./ha-md-list-item";
-import "./ha-menu-button";
-import "./ha-sortable";
import "./ha-svg-icon";
import "./user/ha-user-badge";
@@ -67,7 +62,7 @@ const SORT_VALUE_URL_PATHS = {
config: 11,
};
-const PANEL_ICONS = {
+export const PANEL_ICONS = {
calendar: mdiCalendar,
"developer-tools": mdiHammer,
energy: mdiLightningBolt,
@@ -140,7 +135,7 @@ const defaultPanelSorter = (
return stringCompare(a.title!, b.title!, language);
};
-const computePanels = memoizeOne(
+export const computePanels = memoizeOne(
(
panels: HomeAssistant["panels"],
defaultPanel: HomeAssistant["defaultPanel"],
@@ -192,8 +187,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
@property({ attribute: "always-expand", type: Boolean })
public alwaysExpand = false;
- @property({ attribute: "edit-mode", type: Boolean })
- public editMode = false;
+ @property({ attribute: false })
+ public panelOrder!: string[];
+
+ @property({ attribute: false })
+ public hiddenPanels!: string[];
@state() private _notifications?: PersistentNotification[];
@@ -207,26 +205,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
private _recentKeydownActiveUntil = 0;
- private _editStyleLoaded = false;
-
private _unsubPersistentNotifications: UnsubscribeFunc | undefined;
- @state()
- @storage({
- key: "sidebarPanelOrder",
- state: true,
- subscribe: true,
- })
- private _panelOrder: string[] = [];
-
- @state()
- @storage({
- key: "sidebarHiddenPanels",
- state: true,
- subscribe: true,
- })
- private _hiddenPanels: string[] = [];
-
@query(".tooltip") private _tooltip!: HTMLDivElement;
public hassSubscribe(): UnsubscribeFunc[] {
@@ -270,13 +250,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
changedProps.has("expanded") ||
changedProps.has("narrow") ||
changedProps.has("alwaysExpand") ||
- changedProps.has("editMode") ||
changedProps.has("_externalConfig") ||
changedProps.has("_updatesCount") ||
changedProps.has("_issuesCount") ||
changedProps.has("_notifications") ||
- changedProps.has("_hiddenPanels") ||
- changedProps.has("_panelOrder")
+ changedProps.has("hiddenPanels") ||
+ changedProps.has("panelOrder")
) {
return true;
}
@@ -322,9 +301,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
if (changedProps.has("alwaysExpand")) {
toggleAttribute(this, "expanded", this.alwaysExpand);
}
- if (changedProps.has("editMode") && this.editMode) {
- this._editModeActivated();
- }
if (!changedProps.has("hass")) {
return;
}
@@ -374,8 +350,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
class="menu"
@action=${this._handleAction}
.actionHandler=${actionHandler({
- hasHold: !this.editMode,
- disabled: this.editMode,
+ hasHold: true,
})}
>
${!this.narrow
@@ -389,11 +364,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
>
`
: ""}
- ${this.editMode
- ? html`
- ${this.hass.localize("ui.sidebar.done")}
- `
- : html` `;
}
@@ -401,14 +372,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
const [beforeSpacer, afterSpacer] = computePanels(
this.hass.panels,
this.hass.defaultPanel,
- this._panelOrder,
- this._hiddenPanels,
+ this.panelOrder,
+ this.hiddenPanels,
this.hass.locale
);
// prettier-ignore
return html`
-
- ${this.editMode
- ? this._renderPanelsEdit(beforeSpacer, selectedPanel)
- : this._renderPanels(beforeSpacer, selectedPanel)}
+ ${this._renderPanels(beforeSpacer, selectedPanel)}
${this._renderSpacer()}
${this._renderPanels(afterSpacer, selectedPanel)}
${this._renderExternalConfiguration()}
-
`;
}
- private _renderPanels(
- panels: PanelInfo[],
- selectedPanel: string,
- sortable = false
- ) {
+ private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
return panels.map((panel) =>
this._renderPanel(
panel.url_path,
@@ -444,36 +407,26 @@ class HaSidebar extends SubscribeMixin(LitElement) {
: panel.url_path in PANEL_ICONS
? PANEL_ICONS[panel.url_path]
: undefined,
- selectedPanel,
- sortable
+ selectedPanel
)
);
}
- private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
- return html`
- ${this._renderPanels(beforeSpacer, selectedPanel, true)}
- ${this._renderSpacer()}${this._renderHiddenPanels()}
- `;
- }
-
private _renderPanel(
urlPath: string,
title: string | null,
icon: string | null | undefined,
iconPath: string | null | undefined,
- selectedPanel: string,
- sortable = false
+ selectedPanel: string
) {
return urlPath === "config"
? this._renderConfiguration(title, selectedPanel)
: html`
`
: html`
`;
}
- private _panelMoved(ev: CustomEvent) {
- ev.stopPropagation();
- const { oldIndex, newIndex } = ev.detail;
-
- const [beforeSpacer] = computePanels(
- this.hass.panels,
- this.hass.defaultPanel,
- this._panelOrder,
- this._hiddenPanels,
- this.hass.locale
- );
-
- const panelOrder = beforeSpacer.map((panel) => panel.url_path);
- const panel = panelOrder.splice(oldIndex, 1)[0];
- panelOrder.splice(newIndex, 0, panel);
-
- this._panelOrder = panelOrder;
- }
-
- private _renderHiddenPanels() {
- return html`${this._hiddenPanels.length
- ? html`${this._hiddenPanels.map((url) => {
- const panel = this.hass.panels[url];
- if (!panel) {
- return "";
- }
- return html`
- ${panel.url_path === this.hass.defaultPanel && !panel.icon
- ? html` `;
- })}
- ${this._renderSpacer()}`
- : ""}`;
- }
-
private _renderDivider() {
return html``;
}
@@ -677,48 +559,17 @@ class HaSidebar extends SubscribeMixin(LitElement) {
return;
}
- fireEvent(this, "hass-edit-sidebar", { editMode: true });
+ showEditSidebarDialog(this, {
+ saveCallback: this._saveSidebar,
+ });
}
- private async _editModeActivated() {
- await this._loadEditStyle();
- }
-
- private async _loadEditStyle() {
- if (this._editStyleLoaded) return;
-
- const editStylesImport = await import("../resources/ha-sidebar-edit-style");
-
- const style = document.createElement("style");
- style.innerHTML = (editStylesImport.sidebarEditStyle as CSSResult).cssText;
- this.shadowRoot!.appendChild(style);
-
- await this.updateComplete;
- }
-
- private _closeEditMode() {
- fireEvent(this, "hass-edit-sidebar", { editMode: false });
- }
-
- private async _hidePanel(ev: Event) {
- ev.preventDefault();
- const panel = (ev.currentTarget as any).panel;
- if (this._hiddenPanels.includes(panel)) {
- return;
- }
- // Make a copy for Memoize
- this._hiddenPanels = [...this._hiddenPanels, panel];
- // Remove it from the panel order
- this._panelOrder = this._panelOrder.filter((order) => order !== panel);
- }
-
- private async _unhidePanel(ev: Event) {
- ev.preventDefault();
- const panel = (ev.currentTarget as any).panel;
- this._hiddenPanels = this._hiddenPanels.filter(
- (hidden) => hidden !== panel
- );
- }
+ private _saveSidebar = (order: string[], hidden: string[]) => {
+ fireEvent(this, "hass-edit-sidebar", {
+ order,
+ hidden,
+ });
+ };
private _itemMouseEnter(ev: MouseEvent) {
// On keypresses on the listbox, we're going to ignore mouse enter events
@@ -851,12 +702,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
font-size: var(--ha-font-size-xl);
align-items: center;
- padding-left: calc(4px + env(safe-area-inset-left));
- padding-inline-start: calc(4px + env(safe-area-inset-left));
+ padding-left: calc(4px + var(--safe-area-inset-left));
+ padding-inline-start: calc(4px + var(--safe-area-inset-left));
padding-inline-end: initial;
}
:host([expanded]) .menu {
- width: calc(256px + env(safe-area-inset-left));
+ width: calc(256px + var(--safe-area-inset-left));
}
.menu ha-icon-button {
color: var(--sidebar-icon-color);
@@ -875,12 +726,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
:host([expanded]) .title {
display: initial;
}
- :host([expanded]) .menu mwc-button {
- margin: 0 8px;
- }
- .menu mwc-button {
- width: 100%;
- }
.hidden-panel {
display: none;
}
@@ -890,11 +735,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
box-sizing: border-box;
height: calc(100% - var(--header-height) - 132px);
height: calc(
- 100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
+ 100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
);
overflow-x: hidden;
background: none;
- margin-left: env(safe-area-inset-left);
+ margin-left: var(--safe-area-inset-left);
}
ha-md-list-item {
@@ -914,7 +759,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
:host([expanded]) ha-md-list-item {
width: 248px;
- width: calc(248px - env(safe-area-inset-left));
+ width: calc(248px - var(--safe-area-inset-left));
}
ha-md-list-item.selected {
@@ -949,7 +794,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
ha-md-list-item .item-text {
- font-family: var(--ha-font-family-body);
display: none;
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index 20fd210484..e7a98128b7 100644
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -419,7 +419,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.hass=${this.hass}
id="input"
.type=${"device_id"}
- .label=${this.hass.localize(
+ .placeholder=${this.hass.localize(
+ "ui.components.target-picker.add_device_id"
+ )}
+ .searchLabel=${this.hass.localize(
"ui.components.target-picker.add_device_id"
)}
.deviceFilter=${this.deviceFilter}
@@ -438,7 +441,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.hass=${this.hass}
id="input"
.type=${"label_id"}
- .label=${this.hass.localize(
+ .placeholder=${this.hass.localize(
+ "ui.components.target-picker.add_label_id"
+ )}
+ .searchLabel=${this.hass.localize(
"ui.components.target-picker.add_label_id"
)}
no-add
diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index 7d55082960..a6e380accd 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -28,22 +28,30 @@ export class HaTimeInput extends LitElement {
protected render() {
const useAMPM = useAmPm(this.locale);
- const parts = this.value?.split(":") || [];
- let hours = parts[0];
- const numberHours = Number(parts[0]);
- if (numberHours && useAMPM && numberHours > 12 && numberHours < 24) {
- hours = String(numberHours - 12).padStart(2, "0");
- }
- if (useAMPM && numberHours === 0) {
- hours = "12";
+ let hours = NaN;
+ let minutes = NaN;
+ let seconds = NaN;
+ let numberHours = 0;
+ if (this.value) {
+ const parts = this.value?.split(":") || [];
+ minutes = parts[1] ? Number(parts[1]) : 0;
+ seconds = parts[2] ? Number(parts[2]) : 0;
+ hours = parts[0] ? Number(parts[0]) : 0;
+ numberHours = hours;
+ if (numberHours && useAMPM && numberHours > 12 && numberHours < 24) {
+ hours = numberHours - 12;
+ }
+ if (useAMPM && numberHours === 0) {
+ hours = 12;
+ }
}
return html`
= 12 ? "PM" : "AM"}
.disabled=${this.disabled}
@@ -52,6 +60,11 @@ export class HaTimeInput extends LitElement {
.required=${this.required}
.clearable=${this.clearable && this.value !== undefined}
.helper=${this.helper}
+ day-label="dd"
+ hour-label="hh"
+ min-label="mm"
+ sec-label="ss"
+ ms-label="ms"
>
`;
}
diff --git a/src/components/ha-toast.ts b/src/components/ha-toast.ts
index 8946aee00c..4f6be82b24 100644
--- a/src/components/ha-toast.ts
+++ b/src/components/ha-toast.ts
@@ -14,9 +14,9 @@ export class HaToast extends Snackbar {
.mdc-snackbar {
margin: 8px;
- right: calc(8px + env(safe-area-inset-right));
- bottom: calc(8px + env(safe-area-inset-bottom));
- left: calc(8px + env(safe-area-inset-left));
+ right: calc(8px + var(--safe-area-inset-right));
+ bottom: calc(8px + var(--safe-area-inset-bottom));
+ left: calc(8px + var(--safe-area-inset-left));
}
.mdc-snackbar__surface {
@@ -37,9 +37,9 @@ export class HaToast extends Snackbar {
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-snackbar {
- right: env(safe-area-inset-right);
- bottom: env(safe-area-inset-bottom);
- left: env(safe-area-inset-left);
+ right: var(--safe-area-inset-right);
+ bottom: var(--safe-area-inset-bottom);
+ left: var(--safe-area-inset-left);
}
.mdc-snackbar__surface {
min-width: 100%;
diff --git a/src/components/media-player/ha-browse-media-tts.ts b/src/components/media-player/ha-browse-media-tts.ts
index 1924af09a4..c6b327975c 100644
--- a/src/components/media-player/ha-browse-media-tts.ts
+++ b/src/components/media-player/ha-browse-media-tts.ts
@@ -214,6 +214,7 @@ class BrowseMediaTTS extends LitElement {
item.media_content_id = `${
item.media_content_id.split("?")[0]
}?${query.toString()}`;
+ item.media_content_type = "audio/mp3";
item.can_play = true;
item.title = message;
fireEvent(this, "tts-picked", { item });
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index d16e68cf1d..2959a37d89 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -1,21 +1,30 @@
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { property } from "lit/decorators";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
-import { stringCompare } from "../../common/string/compare";
import type { User } from "../../data/user";
import { fetchUsers } from "../../data/user";
import type { HomeAssistant } from "../../types";
-import "../ha-select";
+import "../ha-combo-box-item";
+import "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";
import "./ha-user-badge";
-import "../ha-list-item";
+interface UserComboBoxItem extends PickerComboBoxItem {
+ user?: User;
+}
+
+@customElement("ha-user-picker")
class HaUserPicker extends LitElement {
- public hass?: HomeAssistant;
+ @property({ attribute: false }) public hass!: HomeAssistant;
@property() public label?: string;
+ @property() public placeholder?: string;
+
@property({ attribute: false }) public noUserLabel?: string;
@property() public value = "";
@@ -24,78 +33,124 @@ class HaUserPicker extends LitElement {
@property({ type: Boolean }) public disabled = false;
- private _sortedUsers = memoizeOne((users?: User[]) => {
+ protected firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ if (!this.users) {
+ this._fetchUsers();
+ }
+ }
+
+ private async _fetchUsers() {
+ this.users = await fetchUsers(this.hass);
+ }
+
+ private usersMap = memoizeOne((users?: User[]): Map => {
+ if (!users) {
+ return new Map();
+ }
+ return new Map(users.map((user) => [user.id, user]));
+ });
+
+ private _valueRenderer: PickerValueRenderer = (value) => {
+ const user = this.usersMap(this.users).get(value);
+ if (!user) {
+ return html` ${value} `;
+ }
+
+ return html`
+ = (item) => {
+ const user = item.user;
+ if (!user) {
+ return html`
+ ${item.icon
+ ? html` `;
+ }
+
+ return html`
+
+
+ `;
+ };
+
+ private _getUsers = memoizeOne((users?: User[]) => {
if (!users) {
return [];
}
return users
.filter((user) => !user.system_generated)
- .sort((a, b) =>
- stringCompare(a.name, b.name, this.hass!.locale.language)
- );
+ .map((user) => ({
+ id: user.id,
+ primary: user.name,
+ domain_name: user.name,
+ search_labels: [user.name, user.id, user.username].filter(
+ Boolean
+ ) as string[],
+ sorting_label: user.name,
+ user,
+ }));
});
+ private _getItems = () => this._getUsers(this.users);
+
protected render(): TemplateResult {
+ const placeholder =
+ this.placeholder ?? this.hass.localize("ui.components.user-picker.user");
+
return html`
-
- ${this.users?.length === 0
- ? html`
- ${this.noUserLabel ||
- this.hass?.localize("ui.components.user-picker.no_user")}
- `
- : ""}
- ${this._sortedUsers(this.users).map(
- (user) => html`
-
-
- `
+ .notFoundLabel=${this.hass.localize(
+ "ui.components.user-picker.no_match"
)}
-
+ .placeholder=${placeholder}
+ .value=${this.value}
+ .getItems=${this._getItems}
+ .valueRenderer=${this._valueRenderer}
+ .rowRenderer=${this._rowRenderer}
+ @value-changed=${this._valueChanged}
+ >
+
`;
}
- protected firstUpdated(changedProps) {
- super.firstUpdated(changedProps);
- if (this.users === undefined) {
- fetchUsers(this.hass!).then((users) => {
- this.users = users;
- });
- }
+ private _valueChanged(ev) {
+ const value = ev.detail.value;
+
+ this.value = value;
+ fireEvent(this, "value-changed", { value });
+ fireEvent(this, "change");
}
-
- private _userChanged(ev) {
- const newValue = ev.target.value;
-
- if (newValue !== this.value) {
- this.value = newValue;
- setTimeout(() => {
- fireEvent(this, "value-changed", { value: newValue });
- fireEvent(this, "change");
- }, 0);
- }
- }
-
- static styles = css`
- :host {
- display: inline-block;
- }
- `;
}
-customElements.define("ha-user-picker", HaUserPicker);
-
declare global {
interface HTMLElementTagNameMap {
"ha-user-picker": HaUserPicker;
diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts
index d3160be467..a6c01df6fe 100644
--- a/src/components/user/ha-users-picker.ts
+++ b/src/components/user/ha-users-picker.ts
@@ -1,4 +1,3 @@
-import { mdiClose } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { guard } from "lit/directives/guard";
@@ -6,13 +5,15 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
import type { User } from "../../data/user";
import { fetchUsers } from "../../data/user";
-import type { ValueChangedEvent, HomeAssistant } from "../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../types";
import "../ha-icon-button";
import "./ha-user-picker";
@customElement("ha-users-picker")
-class HaUsersPickerLight extends LitElement {
- @property({ attribute: false }) public hass?: HomeAssistant;
+class HaUsersPicker extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public label?: string;
@property({ attribute: false }) public value?: string[];
@@ -29,13 +30,15 @@ class HaUsersPickerLight extends LitElement {
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
- if (this.users === undefined) {
- fetchUsers(this.hass!).then((users) => {
- this.users = users;
- });
+ if (!this.users) {
+ this._fetchUsers();
}
}
+ private async _fetchUsers() {
+ this.users = await fetchUsers(this.hass);
+ }
+
protected render() {
if (!this.hass || !this.users) {
return nothing;
@@ -43,15 +46,13 @@ class HaUsersPickerLight extends LitElement {
const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
return html`
+ ${this.label ? html`` : nothing}
${guard([notSelectedUsers], () =>
this.value?.map(
(user_id, idx) => html`
- >
`
)
)}
- ) {
- event.stopPropagation();
- const index = (event.currentTarget as any).index;
- const newValue = event.detail.value;
+ private _userChanged(ev: ValueChangedEvent) {
+ ev.stopPropagation();
+ const index = (ev.currentTarget as any).index;
+ const newValue = ev.detail.value;
const newUsers = [...this._currentUsers];
- if (newValue === "") {
+ if (!newValue) {
newUsers.splice(index, 1);
} else {
newUsers.splice(index, 1, newValue);
@@ -148,24 +141,15 @@ class HaUsersPickerLight extends LitElement {
this._updateUsers([...currentUsers, toAdd]);
}
- private _removeUser(event) {
- const userId = (event.currentTarget as any).userId;
- this._updateUsers(this._currentUsers.filter((user) => user !== userId));
- }
-
- static styles = css`
- :host {
- display: block;
- }
+ static override styles = css`
div {
- display: flex;
- align-items: center;
+ margin-top: 8px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
- "ha-users-picker": HaUsersPickerLight;
+ "ha-users-picker": HaUsersPicker;
}
}
diff --git a/src/data/assist_pipeline.ts b/src/data/assist_pipeline.ts
index 72da3c5e9a..8c6d10949a 100644
--- a/src/data/assist_pipeline.ts
+++ b/src/data/assist_pipeline.ts
@@ -1,6 +1,5 @@
import type { HomeAssistant } from "../types";
import type { ConversationResult } from "./conversation";
-import type { ResolvedMediaSource } from "./media_source";
import type { SpeechMetadata } from "./stt";
export interface AssistPipeline {
@@ -53,10 +52,16 @@ interface PipelineRunStartEvent extends PipelineEventBase {
data: {
pipeline: string;
language: string;
+ conversation_id: string;
runner_data: {
stt_binary_handler_id: number | null;
timeout: number;
};
+ tts_output?: {
+ token: string;
+ url: string;
+ mime_type: string;
+ };
};
}
interface PipelineRunEndEvent extends PipelineEventBase {
@@ -109,7 +114,7 @@ interface PipelineIntentStartEvent extends PipelineEventBase {
};
}
-interface ConversationChatLogAssistantDelta {
+export interface ConversationChatLogAssistantDelta {
role: "assistant";
content: string;
tool_calls: {
@@ -119,7 +124,7 @@ interface ConversationChatLogAssistantDelta {
}[];
}
-interface ConversationChatLogToolResultDelta {
+export interface ConversationChatLogToolResultDelta {
role: "tool_result";
agent_id: string;
tool_call_id: string;
@@ -156,7 +161,12 @@ interface PipelineTTSStartEvent extends PipelineEventBase {
interface PipelineTTSEndEvent extends PipelineEventBase {
type: "tts-end";
data: {
- tts_output: ResolvedMediaSource;
+ tts_output: {
+ media_id: string;
+ token: string;
+ url: string;
+ mime_type: string;
+ };
};
}
diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts
index f303233e47..4bb768c1c7 100644
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -471,8 +471,8 @@ class MoreInfoUpdate extends LitElement {
position: sticky;
bottom: 0;
margin: 0 -24px 0 -24px;
- margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px));
- padding-bottom: env(safe-area-inset-bottom);
+ margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
+ padding-bottom: var(--safe-area-inset-bottom);
box-sizing: border-box;
display: flex;
flex-direction: column;
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index 0517dd206c..5662726d2d 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -128,7 +128,7 @@ export class MoreInfoInfo extends LitElement {
flex-direction: column;
flex: 1;
padding: 24px;
- padding-bottom: max(env(safe-area-inset-bottom), 24px);
+ padding-bottom: max(var(--safe-area-inset-bottom), 24px);
}
[data-domain="camera"] .content {
diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts
index a3c83bcd69..bbb41039eb 100644
--- a/src/dialogs/notifications/notification-drawer.ts
+++ b/src/dialogs/notifications/notification-drawer.ts
@@ -159,11 +159,11 @@ export class HuiNotificationDrawer extends LitElement {
.notifications {
overflow-y: auto;
padding-top: 16px;
- padding-left: env(safe-area-inset-left);
- padding-right: env(safe-area-inset-right);
- padding-inline-start: env(safe-area-inset-left);
- padding-inline-end: env(safe-area-inset-right);
- padding-bottom: env(safe-area-inset-bottom);
+ padding-left: var(--safe-area-inset-left);
+ padding-right: var(--safe-area-inset-right);
+ padding-inline-start: var(--safe-area-inset-left);
+ padding-inline-end: var(--safe-area-inset-right);
+ padding-bottom: var(--safe-area-inset-bottom);
height: calc(100% - 1px - var(--header-height));
box-sizing: border-box;
background-color: var(--primary-background-color);
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index f27ff5b428..68b2fa2a5f 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -28,6 +28,7 @@ import {
import { computeDomain } from "../../common/entity/compute_domain";
import { computeEntityName } from "../../common/entity/compute_entity_name";
import { computeStateName } from "../../common/entity/compute_state_name";
+import { getDeviceContext } from "../../common/entity/context/get_device_context";
import { getEntityContext } from "../../common/entity/context/get_entity_context";
import { navigate } from "../../common/navigate";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
@@ -41,6 +42,7 @@ import "../../components/ha-md-list-item";
import "../../components/ha-spinner";
import "../../components/ha-textfield";
import "../../components/ha-tip";
+import { getConfigEntries } from "../../data/config_entries";
import { fetchHassioAddonsInfo } from "../../data/hassio/addon";
import { domainToName } from "../../data/integration";
import { getPanelNameTranslationKey } from "../../data/panel";
@@ -50,6 +52,7 @@ import { HaFuse } from "../../resources/fuse";
import { haStyleDialog, haStyleScrollbar } from "../../resources/styles";
import { loadVirtualizer } from "../../resources/virtualizer";
import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
import { showConfirmationDialog } from "../generic/show-dialog-box";
import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
import { QuickBarMode, type QuickBarParams } from "./show-dialog-quick-bar";
@@ -75,6 +78,8 @@ interface EntityItem extends QuickBarItem {
interface DeviceItem extends QuickBarItem {
deviceId: string;
+ domain?: string;
+ translatedDomain?: string;
area?: string;
}
@@ -297,7 +302,8 @@ export class QuickBar extends LitElement {
this._commandItems =
this._commandItems || (await this._generateCommandItems());
} else if (this._mode === QuickBarMode.Device) {
- this._deviceItems = this._deviceItems || this._generateDeviceItems();
+ this._deviceItems =
+ this._deviceItems || (await this._generateDeviceItems());
} else {
this._entityItems =
this._entityItems || (await this._generateEntityItems());
@@ -344,10 +350,28 @@ export class QuickBar extends LitElement {
tabindex="0"
type="button"
>
+ ${item.domain
+ ? html`
`
+ : nothing}
${item.primaryText}
${item.area
? html` ${item.area} `
: nothing}
+ ${item.translatedDomain
+ ? html` {
+ const configEntries = await getConfigEntries(this.hass);
+ const configEntryLookup = Object.fromEntries(
+ configEntries.map((entry) => [entry.entry_id, entry])
+ );
+
return Object.values(this.hass.devices)
.filter((device) => !device.disabled_by)
.map((device) => {
- const area = device.area_id
- ? this.hass.areas[device.area_id]
- : undefined;
+ const deviceName = computeDeviceNameDisplay(device, this.hass);
+
+ const { area } = getDeviceContext(device, this.hass);
+
+ const areaName = area ? computeAreaName(area) : undefined;
+
const deviceItem = {
- primaryText: computeDeviceNameDisplay(device, this.hass),
+ primaryText: deviceName,
deviceId: device.id,
- area: area?.name,
+ area: areaName,
action: () => navigate(`/config/devices/device/${device.id}`),
};
+ const configEntry = device.primary_config_entry
+ ? configEntryLookup[device.primary_config_entry]
+ : undefined;
+
+ const domain = configEntry?.domain;
+ const translatedDomain = domain
+ ? domainToName(this.hass.localize, domain)
+ : undefined;
+
return {
...deviceItem,
- strings: [deviceItem.primaryText],
+ domain,
+ translatedDomain,
+ strings: [deviceName, areaName, domain, domainToName].filter(
+ Boolean
+ ) as string[],
};
})
.sort((a, b) =>
@@ -1036,6 +1081,11 @@ export class QuickBar extends LitElement {
white-space: nowrap;
}
+ ha-md-list-item img {
+ width: 32px;
+ height: 32px;
+ }
+
ha-tip {
padding: 20px;
}
diff --git a/src/dialogs/sidebar/dialog-edit-sidebar.ts b/src/dialogs/sidebar/dialog-edit-sidebar.ts
new file mode 100644
index 0000000000..efc42284cc
--- /dev/null
+++ b/src/dialogs/sidebar/dialog-edit-sidebar.ts
@@ -0,0 +1,159 @@
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-dialog-header";
+import "../../components/ha-icon-button";
+import "../../components/ha-items-display-editor";
+import type { DisplayValue } from "../../components/ha-items-display-editor";
+import "../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../components/ha-md-dialog";
+import { computePanels, PANEL_ICONS } from "../../components/ha-sidebar";
+import type { HomeAssistant } from "../../types";
+import type { EditSidebarDialogParams } from "./show-dialog-edit-sidebar";
+
+@customElement("dialog-edit-sidebar")
+class DialogEditSidebar extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @state() private _open = false;
+
+ @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
+ @state() private _order: string[] = [];
+
+ @state() private _hidden: string[] = [];
+
+ private _saveCallback?: (order: string[], hidden: string[]) => void;
+
+ public async showDialog(params: EditSidebarDialogParams): Promise {
+ this._open = true;
+
+ const storedOrder = localStorage.getItem("sidebarPanelOrder");
+ const storedHidden = localStorage.getItem("sidebarHiddenPanels");
+
+ this._order = storedOrder ? JSON.parse(storedOrder) : this._order;
+ this._hidden = storedHidden ? JSON.parse(storedHidden) : this._hidden;
+ this._saveCallback = params.saveCallback;
+ }
+
+ private _dialogClosed(): void {
+ this._open = false;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+
+ public closeDialog(): void {
+ this._dialog?.close();
+ }
+
+ private _panels = memoizeOne((panels: HomeAssistant["panels"]) =>
+ panels ? Object.values(panels) : []
+ );
+
+ protected render() {
+ if (!this._open) {
+ return nothing;
+ }
+
+ const dialogTitle = this.hass.localize("ui.sidebar.edit_sidebar");
+
+ const panels = this._panels(this.hass.panels);
+
+ const [beforeSpacer, afterSpacer] = computePanels(
+ this.hass.panels,
+ this.hass.defaultPanel,
+ this._order,
+ this._hidden,
+ this.hass.locale
+ );
+
+ const items = [
+ ...beforeSpacer,
+ ...panels.filter((panel) => this._hidden.includes(panel.url_path)),
+ ...afterSpacer.filter((panel) => panel.url_path !== "config"),
+ ].map((panel) => ({
+ value: panel.url_path,
+ label:
+ panel.url_path === this.hass.defaultPanel
+ ? panel.title || this.hass.localize("panel.states")
+ : this.hass.localize(`panel.${panel.title}`) || panel.title || "?",
+ icon: panel.icon || undefined,
+ iconPath:
+ panel.url_path === this.hass.defaultPanel && !panel.icon
+ ? PANEL_ICONS.lovelace
+ : panel.url_path in PANEL_ICONS
+ ? PANEL_ICONS[panel.url_path]
+ : undefined,
+ disableSorting: panel.url_path === "developer-tools",
+ }));
+
+ return html`
+
+
+
+
+ `;
+ }
+
+ private _changed(ev: CustomEvent<{ value: DisplayValue }>): void {
+ const { order = [], hidden = [] } = ev.detail.value;
+ this._order = [...order];
+ this._hidden = [...hidden];
+ }
+
+ private _save(): void {
+ this._saveCallback?.(this._order ?? [], this._hidden ?? []);
+ this.closeDialog();
+ }
+
+ static styles = css`
+ ha-md-dialog {
+ min-width: 600px;
+ max-height: 90%;
+ }
+
+ @media all and (max-width: 600px), all and (max-height: 500px) {
+ ha-md-dialog {
+ --md-dialog-container-shape: 0;
+ min-width: 100%;
+ min-height: 100%;
+ }
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-edit-sidebar": DialogEditSidebar;
+ }
+}
diff --git a/src/dialogs/sidebar/show-dialog-edit-sidebar.ts b/src/dialogs/sidebar/show-dialog-edit-sidebar.ts
new file mode 100644
index 0000000000..4a88bafd6b
--- /dev/null
+++ b/src/dialogs/sidebar/show-dialog-edit-sidebar.ts
@@ -0,0 +1,18 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface EditSidebarDialogParams {
+ saveCallback: (order: string[], hidden: string[]) => void;
+}
+
+export const loadEditSidebarDialog = () => import("./dialog-edit-sidebar");
+
+export const showEditSidebarDialog = (
+ element: HTMLElement,
+ dialogParams: EditSidebarDialogParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-edit-sidebar",
+ dialogImport: loadEditSidebarDialog,
+ dialogParams,
+ });
+};
diff --git a/src/external_app/external_app_entrypoint.ts b/src/external_app/external_app_entrypoint.ts
index e5aac787a8..66edfdb504 100644
--- a/src/external_app/external_app_entrypoint.ts
+++ b/src/external_app/external_app_entrypoint.ts
@@ -7,6 +7,7 @@ This is the entry point for providing external app stuff from app entrypoint.
import { fireEvent } from "../common/dom/fire_event";
import { mainWindow } from "../common/dom/get_main_window";
+import { navigate } from "../common/navigate";
import { showAutomationEditor } from "../data/automation";
import type { HomeAssistantMain } from "../layouts/home-assistant-main";
import type {
@@ -50,7 +51,7 @@ export const addExternalBarCodeListener = (
};
};
-const handleExternalMessage = (
+export const handleExternalMessage = (
hassMainEl: HomeAssistantMain,
msg: EMIncomingMessageCommands
): boolean => {
@@ -64,6 +65,14 @@ const handleExternalMessage = (
success: true,
result: null,
});
+ } else if (msg.command === "navigate") {
+ navigate(msg.payload.path, msg.payload.options);
+ bus.fireMessage({
+ id: msg.id,
+ type: "result",
+ success: true,
+ result: null,
+ });
} else if (msg.command === "notifications/show") {
fireEvent(hassMainEl, "hass-show-notifications");
bus.fireMessage({
diff --git a/src/external_app/external_messaging.ts b/src/external_app/external_messaging.ts
index 773182c248..be25a5f223 100644
--- a/src/external_app/external_messaging.ts
+++ b/src/external_app/external_messaging.ts
@@ -1,3 +1,4 @@
+import type { NavigateOptions } from "../common/navigate";
import type { AutomationConfig } from "../data/automation";
const CALLBACK_EXTERNAL_BUS = "externalBus";
@@ -178,31 +179,40 @@ type EMOutgoingMessageWithoutAnswer =
| EMOutgoingMessageImprovScan
| EMOutgoingMessageImprovConfigureDevice;
-interface EMIncomingMessageRestart {
+export interface EMIncomingMessageRestart {
id: number;
type: "command";
command: "restart";
}
+export interface EMIncomingMessageNavigate {
+ id: number;
+ type: "command";
+ command: "navigate";
+ payload: {
+ path: string;
+ options?: NavigateOptions;
+ };
+}
-interface EMIncomingMessageShowNotifications {
+export interface EMIncomingMessageShowNotifications {
id: number;
type: "command";
command: "notifications/show";
}
-interface EMIncomingMessageToggleSidebar {
+export interface EMIncomingMessageToggleSidebar {
id: number;
type: "command";
command: "sidebar/toggle";
}
-interface EMIncomingMessageShowSidebar {
+export interface EMIncomingMessageShowSidebar {
id: number;
type: "command";
command: "sidebar/show";
}
-interface EMIncomingMessageShowAutomationEditor {
+export interface EMIncomingMessageShowAutomationEditor {
id: number;
type: "command";
command: "automation/editor/show";
@@ -250,14 +260,14 @@ export interface ImprovDiscoveredDevice {
name: string;
}
-interface EMIncomingMessageImprovDeviceDiscovered extends EMMessage {
+export interface EMIncomingMessageImprovDeviceDiscovered extends EMMessage {
id: number;
type: "command";
command: "improv/discovered_device";
payload: ImprovDiscoveredDevice;
}
-interface EMIncomingMessageImprovDeviceSetupDone extends EMMessage {
+export interface EMIncomingMessageImprovDeviceSetupDone extends EMMessage {
id: number;
type: "command";
command: "improv/device_setup_done";
@@ -265,6 +275,7 @@ interface EMIncomingMessageImprovDeviceSetupDone extends EMMessage {
export type EMIncomingMessageCommands =
| EMIncomingMessageRestart
+ | EMIncomingMessageNavigate
| EMIncomingMessageShowNotifications
| EMIncomingMessageToggleSidebar
| EMIncomingMessageShowSidebar
diff --git a/src/html/_preload_roboto.html.template b/src/html/_preload_roboto.html.template
index 382beadfc0..1ab7c56001 100644
--- a/src/html/_preload_roboto.html.template
+++ b/src/html/_preload_roboto.html.template
@@ -1,6 +1,5 @@
Home Assistant
`}
+ Home Assistant
+
`;
}
@@ -120,12 +113,12 @@ class HaUsersPickerLight extends LitElement {
});
}
- private _userChanged(event: ValueChangedEvent
+ ${item.translatedDomain}
+
`
+ : nothing}
`;
}
@@ -549,23 +573,44 @@ export class QuickBar extends LitElement {
);
}
- private _generateDeviceItems(): DeviceItem[] {
+ private async _generateDeviceItems(): Promise
+
+
+
+
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.common.save")}
+
+
+