+ ${this._isZoomed
+ ? html`
`;
}
@@ -210,15 +216,15 @@ export class HaChartBase extends LitElement {
return nothing;
}
const legend = ensureArray(this.options.legend)[0] as LegendComponentOption;
- if (!legend.show) {
+ if (!legend.show || legend.type !== "custom") {
return nothing;
}
const datasets = ensureArray(this.data);
- const items = (legend.data ||
- datasets
+ const items: LegendComponentOption["data"] =
+ legend.data ||
+ ((datasets
.filter((d) => (d.data as any[])?.length && (d.id || d.name))
- .map((d) => d.name ?? d.id) ||
- []) as string[];
+ .map((d) => d.name ?? d.id) || []) as string[]);
const isMobile = window.matchMedia(
"all and (max-width: 450px), all and (max-height: 500px)"
@@ -233,20 +239,32 @@ export class HaChartBase extends LitElement {
})}
>
-
- ${items.map((item: string, index: number) => {
+ ${items.map((item, index) => {
if (!this.expandLegend && index >= overflowLimit) {
return nothing;
}
- const dataset = datasets.find(
- (d) => d.id === item || d.name === item
- );
- const color = dataset?.color as string;
- const borderColor = dataset?.itemStyle?.borderColor as string;
+ let itemStyle: Record
-
- ${item}+${name}`;
})}
${items.length > overflowLimit
@@ -315,7 +333,9 @@ export class HaChartBase extends LitElement {
this.chart.on("click", (e: ECElementEvent) => {
fireEvent(this, "chart-click", e);
});
- this.chart.getZr().on("dblclick", this._handleClickZoom);
+ if (!this.options?.dataZoom) {
+ this.chart.getZr().on("dblclick", this._handleClickZoom);
+ }
if (this._isTouchDevice) {
this.chart.getZr().on("click", (e: ECElementEvent) => {
if (!e.zrByTouch) {
@@ -380,9 +400,9 @@ export class HaChartBase extends LitElement {
if (axis.type !== "time" || axis.show === false) {
return axis;
}
- if (axis.max && axis.min) {
+ if (axis.min) {
this._minutesDifference = differenceInMinutes(
- axis.max as Date,
+ (axis.max as Date) || new Date(),
axis.min as Date
);
}
@@ -410,6 +430,12 @@ export class HaChartBase extends LitElement {
} as XAXisOption;
});
}
+ let legend = this.options?.legend;
+ if (legend) {
+ legend = ensureArray(legend).map((l) =>
+ l.type === "custom" ? { show: false } : l
+ );
+ }
const options = {
animation: !this._reducedMotion,
darkMode: this._themes.darkMode ?? false,
@@ -424,7 +450,7 @@ export class HaChartBase extends LitElement {
iconStyle: { opacity: 0 },
},
...this.options,
- legend: { show: false },
+ legend,
xAxis,
};
@@ -468,6 +494,13 @@ export class HaChartBase extends LitElement {
smooth: false,
},
bar: { itemStyle: { barBorderWidth: 1.5 } },
+ graph: {
+ label: {
+ color: style.getPropertyValue("--primary-text-color"),
+ textBorderColor: style.getPropertyValue("--primary-background-color"),
+ textBorderWidth: 2,
+ },
+ },
categoryAxis: {
axisLine: { show: false },
axisTick: { show: false },
@@ -600,19 +633,21 @@ export class HaChartBase extends LitElement {
}
private _getSeries() {
- const series = ensureArray(this.data).filter(
- (d) => !this._hiddenDatasets.has(String(d.name ?? d.id))
- );
+ const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
+ | XAXisOption
+ | undefined;
const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
| YAXisOption
| undefined;
- if (yAxis?.type === "log") {
- // set <=0 values to null so they render as gaps on a log graph
- return series.map((d) =>
- d.type === "line"
- ? {
- ...d,
- data: d.data?.map((v) =>
+ const series = ensureArray(this.data)
+ .filter((d) => !this._hiddenDatasets.has(String(d.name ?? d.id)))
+ .map((s) => {
+ if (s.type === "line") {
+ if (yAxis?.type === "log") {
+ // set <=0 values to null so they render as gaps on a log graph
+ return {
+ ...s,
+ data: s.data?.map((v) =>
Array.isArray(v)
? [
v[0],
@@ -621,10 +656,26 @@ export class HaChartBase extends LitElement {
]
: v
),
- }
- : d
- );
- }
+ };
+ }
+ if (s.sampling === "minmax") {
+ const minX =
+ xAxis?.min && typeof xAxis.min === "number"
+ ? xAxis.min
+ : undefined;
+ const maxX =
+ xAxis?.max && typeof xAxis.max === "number"
+ ? xAxis.max
+ : undefined;
+ return {
+ ...s,
+ sampling: undefined,
+ data: downSampleLineData(s.data, this.clientWidth, minX, maxX),
+ };
+ }
+ }
+ return s;
+ });
return series;
}
@@ -725,21 +776,31 @@ export class HaChartBase extends LitElement {
height: 100%;
width: 100%;
}
- .zoom-reset {
+ .chart-controls {
position: absolute;
top: 16px;
right: 4px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+ .chart-controls ha-icon-button,
+ .chart-controls ::slotted(ha-icon-button) {
background: var(--card-background-color);
border-radius: 4px;
--mdc-icon-button-size: 32px;
color: var(--primary-color);
border: 1px solid var(--divider-color);
}
+ .chart-controls ha-icon-button.inactive,
+ .chart-controls ::slotted(ha-icon-button.inactive) {
+ color: var(--state-inactive-color);
+ }
.chart-legend {
max-height: 60%;
overflow-y: auto;
padding: 12px 0 0;
- font-size: 12px;
+ font-size: var(--ha-font-size-s);
color: var(--primary-text-color);
}
.chart-legend ul {
diff --git a/src/components/chart/ha-network-graph.ts b/src/components/chart/ha-network-graph.ts
new file mode 100644
index 0000000000..c9693419dc
--- /dev/null
+++ b/src/components/chart/ha-network-graph.ts
@@ -0,0 +1,299 @@
+import type { EChartsType } from "echarts/core";
+import type { GraphSeriesOption } from "echarts/charts";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import type { TopLevelFormatterParams } from "echarts/types/dist/shared";
+import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
+import memoizeOne from "memoize-one";
+import { listenMediaQuery } from "../../common/dom/media_query";
+import type { ECOption } from "../../resources/echarts";
+import "./ha-chart-base";
+import type { HaChartBase } from "./ha-chart-base";
+import type { HomeAssistant } from "../../types";
+
+export interface NetworkNode {
+ id: string;
+ name?: string;
+ category?: number;
+ label?: string;
+ value?: number;
+ symbolSize?: number;
+ symbol?: string;
+ itemStyle?: {
+ color?: string;
+ borderColor?: string;
+ borderWidth?: number;
+ };
+ fixed?: boolean;
+ /**
+ * Distance from the center, where 0 is the center and 1 is the edge
+ */
+ polarDistance?: number;
+}
+
+export interface NetworkLink {
+ source: string;
+ target: string;
+ value?: number;
+ reverseValue?: number;
+ lineStyle?: {
+ width?: number;
+ color?: string;
+ type?: "solid" | "dashed" | "dotted";
+ };
+ symbolSize?: number | number[];
+ symbol?: string;
+ label?: {
+ show?: boolean;
+ formatter?: string;
+ };
+ ignoreForceLayout?: boolean;
+}
+
+export interface NetworkData {
+ nodes: NetworkNode[];
+ links: NetworkLink[];
+ categories?: { name: string; symbol: string }[];
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
+let GraphChart: typeof import("echarts/lib/chart/graph/install");
+
+@customElement("ha-network-graph")
+export class HaNetworkGraph extends LitElement {
+ public chart?: EChartsType;
+
+ @property({ attribute: false }) public data!: NetworkData;
+
+ @property({ attribute: false }) public tooltipFormatter?: (
+ params: TopLevelFormatterParams
+ ) => string;
+
+ public hass!: HomeAssistant;
+
+ @state() private _reducedMotion = false;
+
+ @state() private _physicsEnabled = true;
+
+ @state() private _showLabels = true;
+
+ private _listeners: (() => void)[] = [];
+
+ private _nodePositions: Record
- ${oldId} `); + const dialogNoRename = entityIdsEntries + .filter(([oldId, newId]) => oldId === newId) + .map(([oldId]) => html`
- ${oldId} `); + if (dialogRename.length) { + showConfirmationDialog(element, { + title: hass.localize( + "ui.dialogs.recreate_entity_ids.confirm_rename_title" + ), + text: html`${hass.localize( + "ui.dialogs.recreate_entity_ids.confirm_rename_warning" + )}
+ ${item.domain_name}
+
+ `
+ : nothing}
+
- ${item.domain_name}
-
- `
- : nothing}
-
- ${!this._opened
- ? html`
- ${this._renderContent()}
- `
- : html`
+
+ ${item.domain_name}
+
+ `
+ : nothing}
+
- ${!this._opened
+
+ ${item.icon_path
? html`
-
- ${this._renderContent()}
-
+
+ : item.stateObj
+ ? html`
+
+
+
+
`;
+ }
+
+ private _formatSecondaryText(stateObj: MediaPlayerEntity): string {
+ if (stateObj.state !== "playing") {
+ return this.hass.localize("ui.card.media_player.idle");
+ }
+
+ return [stateObj.attributes.media_title, stateObj.attributes.media_artist]
+ .filter((segment) => segment)
+ .join(" · ");
+ }
+
+ static get styles(): CSSResultGroup {
+ return [
+ css`
+ .list-item {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ column-gap: 16px;
+ align-items: center;
+ width: 100%;
+ }
+
+ .info {
+ min-width: 0;
+ }
+
+ .main-text {
+ color: var(--primary-text-color);
+ }
+
+ .main-text[take-height] {
+ line-height: 40px;
+ }
+
+ .secondary-text {
+ color: var(--secondary-text-color);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ `,
+ ];
+ }
+
+ private _handleChange(ev) {
+ ev.stopPropagation();
+
+ this.checked = ev.target.checked;
+ fireEvent(this, "change");
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-media-player-toggle": HaMediaPlayerToggle;
+ }
+}
diff --git a/src/components/media-player/show-join-media-players-dialog.ts b/src/components/media-player/show-join-media-players-dialog.ts
new file mode 100644
index 0000000000..c63463c9f5
--- /dev/null
+++ b/src/components/media-player/show-join-media-players-dialog.ts
@@ -0,0 +1,16 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface JoinMediaPlayersDialogParams {
+ entityId: string;
+}
+
+export const showJoinMediaPlayersDialog = (
+ element: HTMLElement,
+ dialogParams: JoinMediaPlayersDialogParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-join-media-players",
+ dialogImport: () => import("./dialog-join-media-players"),
+ dialogParams,
+ });
+};
diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts
index b18adc3e20..df8b7e4db7 100644
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@@ -34,16 +34,16 @@ export class HaTileInfo extends LitElement {
width: 100%;
}
.primary {
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
+ font-size: var(--ha-font-size-m);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-normal);
letter-spacing: 0.1px;
color: var(--primary-text-color);
}
.secondary {
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
+ font-size: var(--ha-font-size-s);
+ font-weight: var(--ha-font-weight-normal);
+ line-height: var(--ha-line-height-condensed);
letter-spacing: 0.4px;
color: var(--primary-text-color);
}
diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index 10ea69d58b..a74d37b938 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -164,7 +164,7 @@ export class HatGraphNode extends LitElement {
stroke-width: 0;
}
.number text {
- font-size: 10px;
+ font-size: var(--ha-font-size-xs);
fill: var(--text-primary-color);
}
path.icon {
diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts
index 8b5078b2c1..42a26b1c0d 100644
--- a/src/components/user/ha-person-badge.ts
+++ b/src/components/user/ha-person-badge.ts
@@ -59,10 +59,10 @@ class PersonBadge extends LitElement {
text-decoration: none;
color: var(--text-light-primary-color, var(--primary-text-color));
overflow: hidden;
- font-size: var(--person-badge-font-size, 1em);
+ font-size: var(--person-badge-font-size, var(--ha-font-size-m));
}
.initials.long {
- font-size: 80%;
+ font-size: var(--ha-person-badge-font-size-long, var(--ha-font-size-s));
}
`;
}
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
index e02fdf8618..59114b7e75 100644
--- a/src/components/user/ha-user-badge.ts
+++ b/src/components/user/ha-user-badge.ts
@@ -108,7 +108,7 @@ class UserBadge extends LitElement {
overflow: hidden;
}
.initials.long {
- font-size: 80%;
+ font-size: var(--ha-font-size-s);
}
`;
}
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
+
+ ${computeStateName(stateObj)}
+
+ ${this._formatSecondaryText(stateObj as MediaPlayerEntity)}
+
+
+
`;
}
@@ -120,12 +113,12 @@ class HaUsersPickerLight extends LitElement {
});
}
- private _userChanged(event: ValueChangedEvent+
+
+
+
+ | ${hass.localize("ui.dialogs.recreate_entity_ids.old")} | +${hass.localize("ui.dialogs.recreate_entity_ids.new")} | +
|---|
+ ${dialogTitle}
+
+
+ ${dialogSubtitle
+ ? html` ${dialogSubtitle}
`
+ : nothing}
+ ${showDocumentationLink && !this._loading && this._step
+ ? html`
+
+
${this._loading || this._step === null
? html`
@@ -211,40 +346,13 @@ class DataEntryFlowDialog extends LitElement {
// to reset the element.
nothing
: html`
- ;
- renderAbortHeader?(
+ renderAbortHeader?(hass: HomeAssistant, step: DataEntryFlowStepAbort): string;
+
+ renderAbortSubheader?(
hass: HomeAssistant,
step: DataEntryFlowStepAbort
- ): TemplateResult | string;
+ ): string | TemplateResult;
renderAbortDescription(
hass: HomeAssistant,
@@ -44,6 +46,11 @@ export interface FlowConfig {
renderShowFormStepHeader(
hass: HomeAssistant,
step: DataEntryFlowStepForm
+ ): string;
+
+ renderShowFormStepSubheader?(
+ hass: HomeAssistant,
+ step: DataEntryFlowStepForm
): string | TemplateResult;
renderShowFormStepDescription(
@@ -100,6 +107,11 @@ export interface FlowConfig {
renderShowFormProgressHeader(
hass: HomeAssistant,
step: DataEntryFlowStepProgress
+ ): string;
+
+ renderShowFormProgressSubheader?(
+ hass: HomeAssistant,
+ step: DataEntryFlowStepProgress
): string | TemplateResult;
renderShowFormProgressDescription(
@@ -107,7 +119,9 @@ export interface FlowConfig {
step: DataEntryFlowStepProgress
): TemplateResult | "";
- renderMenuHeader(
+ renderMenuHeader(hass: HomeAssistant, step: DataEntryFlowStepMenu): string;
+
+ renderMenuSubheader?(
hass: HomeAssistant,
step: DataEntryFlowStepMenu
): string | TemplateResult;
diff --git a/src/dialogs/config-flow/step-flow-abort.ts b/src/dialogs/config-flow/step-flow-abort.ts
index 9f0ad9abb0..7277e0b0f8 100644
--- a/src/dialogs/config-flow/step-flow-abort.ts
+++ b/src/dialogs/config-flow/step-flow-abort.ts
@@ -22,9 +22,6 @@ class StepFlowAbort extends LitElement {
@property({ attribute: false }) public handler!: string;
- @property({ type: Boolean, attribute: "increase-padding-end" })
- public increasePaddingEnd = false;
-
protected firstUpdated(changed: PropertyValues) {
super.firstUpdated(changed);
if (this.step.reason === "missing_credentials") {
@@ -37,11 +34,6 @@ class StepFlowAbort extends LitElement {
return nothing;
}
return html`
-
- ${showDocumentationLink
- ? html`
-
-
-
- `
- : nothing}
-
${this._step.type === "form"
? html`
- ${this.params.flowConfig.renderAbortHeader - ? this.params.flowConfig.renderAbortHeader(this.hass, this.step) - : this.hass.localize(`component.${this.domain}.title`)} -
${this.params.flowConfig.renderAbortDescription(this.hass, this.step)}
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index eac44ccff9..483c43c326 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -10,13 +10,13 @@ import {
} from "../../common/entity/compute_device_name";
import { computeDomain } from "../../common/entity/compute_domain";
import { navigate } from "../../common/navigate";
-import { slugify } from "../../common/string/slugify";
import "../../components/ha-area-picker";
import { assistSatelliteSupportsSetupFlow } from "../../data/assist_satellite";
import type { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
import type { DeviceRegistryEntry } from "../../data/device_registry";
import { updateDeviceRegistryEntry } from "../../data/device_registry";
import {
+ getAutomaticEntityIds,
updateEntityRegistryEntry,
type EntityRegistryDisplayEntry,
} from "../../data/entity_registry";
@@ -36,8 +36,7 @@ class StepFlowCreateEntry extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepCreateEntry;
- @property({ type: Boolean, attribute: "increase-padding-end" })
- public increasePaddingEnd = false;
+ @property({ attribute: false }) public devices!: DeviceRegistryEntry[];
public navigateToResult = false;
@@ -46,17 +45,6 @@ class StepFlowCreateEntry extends LitElement {
{ name?: string; area?: string }
> = {};
- private _devices = memoizeOne(
- (
- showDevices: boolean,
- devices: DeviceRegistryEntry[],
- entry_id?: string
- ) =>
- showDevices && entry_id
- ? devices.filter((device) => device.config_entries.includes(entry_id))
- : []
- );
-
private _deviceEntities = memoizeOne(
(
deviceId: string,
@@ -75,22 +63,16 @@ class StepFlowCreateEntry extends LitElement {
return;
}
- const devices = this._devices(
- this.flowConfig.showDevices,
- Object.values(this.hass.devices),
- this.step.result?.entry_id
- );
-
if (
- devices.length !== 1 ||
- devices[0].primary_config_entry !== this.step.result?.entry_id ||
+ this.devices.length !== 1 ||
+ this.devices[0].primary_config_entry !== this.step.result?.entry_id ||
this.step.result.domain === "voip"
) {
return;
}
const assistSatellites = this._deviceEntities(
- devices[0].id,
+ this.devices[0].id,
Object.values(this.hass.entities),
"assist_satellite"
);
@@ -103,26 +85,14 @@ class StepFlowCreateEntry extends LitElement {
this.navigateToResult = false;
this._flowDone();
showVoiceAssistantSetupDialog(this, {
- deviceId: devices[0].id,
+ deviceId: this.devices[0].id,
});
}
}
protected render(): TemplateResult {
const localize = this.hass.localize;
- const devices = this._devices(
- this.flowConfig.showDevices,
- Object.values(this.hass.devices),
- this.step.result?.entry_id
- );
return html`
- - ${devices.length - ? localize("ui.panel.config.integrations.config_flow.assign_area", { - number: devices.length, - }) - : `${localize("ui.panel.config.integrations.config_flow.success")}!`} -
${this.flowConfig.renderCreateEntryDescription(this.hass, this.step)}
${this.step.result?.state === "not_loaded"
@@ -132,10 +102,10 @@ class StepFlowCreateEntry extends LitElement {
)}`
: nothing}
- ${devices.length === 0 &&
+ ${this.devices.length === 0 &&
["options_flow", "repair_flow"].includes(this.flowConfig.flowType)
? nothing
- : devices.length === 0
+ : this.devices.length === 0
? html`
${localize( "ui.panel.config.integrations.config_flow.created_config", @@ -144,7 +114,7 @@ class StepFlowCreateEntry extends LitElement {
` : html`
- ${devices.map(
+ ${this.devices.map(
(device) => html`
@@ -203,7 +173,7 @@ class StepFlowCreateEntry extends LitElement {
@@ -212,19 +182,11 @@ class StepFlowCreateEntry extends LitElement {
private async _flowDone(): Promise {
if (Object.keys(this._deviceUpdate).length) {
- const renamedDevices: {
- deviceId: string;
- oldDeviceName: string | null | undefined;
- newDeviceName: string;
- }[] = [];
+ const renamedDevices: string[] = [];
const deviceUpdates = Object.entries(this._deviceUpdate).map(
([deviceId, update]) => {
if (update.name) {
- renamedDevices.push({
- deviceId,
- oldDeviceName: computeDeviceName(this.hass.devices[deviceId]),
- newDeviceName: update.name,
- });
+ renamedDevices.push(deviceId);
}
return updateDeviceRegistryEntry(this.hass, deviceId, {
name_by_user: update.name,
@@ -239,38 +201,36 @@ class StepFlowCreateEntry extends LitElement {
});
}
);
+ await Promise.allSettled(deviceUpdates);
const entityUpdates: Promise[] = [];
- renamedDevices.forEach(({ deviceId, oldDeviceName, newDeviceName }) => {
- if (!oldDeviceName) {
- return;
- }
+ const entityIds: string[] = [];
+ renamedDevices.forEach((deviceId) => {
const entities = this._deviceEntities(
deviceId,
Object.values(this.hass.entities)
);
- const oldDeviceSlug = slugify(oldDeviceName);
- const newDeviceSlug = slugify(newDeviceName);
- entities.forEach((entity) => {
- const oldId = entity.entity_id;
-
- if (oldId.includes(oldDeviceSlug)) {
- const newEntityId = oldId.replace(oldDeviceSlug, newDeviceSlug);
- entityUpdates.push(
- updateEntityRegistryEntry(this.hass, entity.entity_id, {
- new_entity_id: newEntityId,
- }).catch((err) =>
- showAlertDialog(this, {
- text: this.hass.localize(
- "ui.panel.config.integrations.config_flow.error_saving_entity",
- { error: err.message }
- ),
- })
- )
- );
- }
- });
+ entityIds.push(...entities.map((entity) => entity.entity_id));
});
- await Promise.allSettled([...deviceUpdates, ...entityUpdates]);
+
+ const entityIdsMapping = getAutomaticEntityIds(this.hass, entityIds);
+
+ Object.entries(entityIdsMapping).forEach(([oldEntityId, newEntityId]) => {
+ if (newEntityId) {
+ entityUpdates.push(
+ updateEntityRegistryEntry(this.hass, oldEntityId, {
+ new_entity_id: newEntityId,
+ }).catch((err) =>
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.panel.config.integrations.config_flow.error_saving_entity",
+ { error: err.message }
+ ),
+ })
+ )
+ );
+ }
+ });
+ await Promise.allSettled(entityUpdates);
}
fireEvent(this, "flow-update", { step: undefined });
diff --git a/src/dialogs/config-flow/step-flow-external.ts b/src/dialogs/config-flow/step-flow-external.ts
index 98d98c61ef..7907dd2901 100644
--- a/src/dialogs/config-flow/step-flow-external.ts
+++ b/src/dialogs/config-flow/step-flow-external.ts
@@ -15,16 +15,10 @@ class StepFlowExternal extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepExternal;
- @property({ type: Boolean, attribute: "increase-padding-end" })
- public increasePaddingEnd = false;
-
protected render(): TemplateResult {
const localize = this.hass.localize;
return html`
-
- ${this.flowConfig.renderExternalStepHeader(this.hass, this.step)} -
${this.flowConfig.renderExternalStepDescription(this.hass, this.step)}
@@ -56,9 +50,6 @@ class StepFlowExternal extends LitElement {
.open-button a {
text-decoration: none;
}
- h2.end-space {
- padding-inline-end: 72px;
- }
`,
];
}
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 06ec17dc0d..ee6ebba201 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -2,34 +2,37 @@ import "@material/mwc-button";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
import { isNavigationClick } from "../../common/dom/is-navigation-click";
import "../../components/ha-alert";
-import "../../components/ha-spinner";
import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
import "../../components/ha-form/ha-form";
-import type { HaFormSchema } from "../../components/ha-form/types";
+import type {
+ HaFormSchema,
+ HaFormSelector,
+} from "../../components/ha-form/types";
import "../../components/ha-markdown";
+import "../../components/ha-spinner";
import { autocompleteLoginFields } from "../../data/auth";
import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
+import { previewModule } from "../../data/preview";
+import { haStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
-import { haStyle } from "../../resources/styles";
-import { previewModule } from "../../data/preview";
@customElement("step-flow-form")
class StepFlowForm extends LitElement {
@property({ attribute: false }) public flowConfig!: FlowConfig;
+ @property({ type: Boolean }) public narrow = false;
+
@property({ attribute: false }) public step!: DataEntryFlowStepForm;
@property({ attribute: false }) public hass!: HomeAssistant;
- @property({ type: Boolean, attribute: "increase-padding-end" })
- public increasePaddingEnd = false;
-
@state() private _loading = false;
@state() private _stepData?: Record;
@@ -41,14 +44,20 @@ class StepFlowForm extends LitElement {
this.removeEventListener("keydown", this._handleKeyDown);
}
+ private handleReadOnlyFields = memoizeOne((schema) =>
+ schema?.map((field) => ({
+ ...field,
+ ...(Object.values((field as HaFormSelector)?.selector ?? {})[0]?.read_only
+ ? { disabled: true }
+ : {}),
+ }))
+ );
+
protected render(): TemplateResult {
const step = this.step;
const stepData = this._stepDataProcessed;
return html`
-
- ${this.flowConfig.renderShowFormStepHeader(this.hass, this.step)} -
${this.flowConfig.renderShowFormStepDescription(this.hass, this.step)}
${this._errorMsg
@@ -56,10 +65,13 @@ class StepFlowForm extends LitElement {
: ""}
{
const value = stepData[key];
const isEmpty = [undefined, ""].includes(value);
-
- if (!isEmpty) {
+ const field = this.step.data_schema?.find((f) => f.name === key);
+ const selector = (field as HaFormSelector)?.selector ?? {};
+ const read_only = (Object.values(selector)[0] as any)?.read_only;
+ if (!isEmpty && !read_only) {
toSendData[key] = value;
}
});
@@ -281,9 +295,6 @@ class StepFlowForm extends LitElement {
margin-top: 24px;
display: block;
}
- h2 {
- word-break: break-word;
- }
`,
];
}
diff --git a/src/dialogs/config-flow/step-flow-menu.ts b/src/dialogs/config-flow/step-flow-menu.ts
index b0fcd3ba64..ede8a2998e 100644
--- a/src/dialogs/config-flow/step-flow-menu.ts
+++ b/src/dialogs/config-flow/step-flow-menu.ts
@@ -17,9 +17,6 @@ class StepFlowMenu extends LitElement {
@property({ attribute: false }) public step!: DataEntryFlowStepMenu;
- @property({ type: Boolean, attribute: "increase-padding-end" })
- public increasePaddingEnd = false;
-
protected render(): TemplateResult {
let options: string[];
let translations: Record;
@@ -45,9 +42,6 @@ class StepFlowMenu extends LitElement {
);
return html`
-
- ${this.flowConfig.renderMenuHeader(this.hass, this.step)} -
${description ? html`${description}
` : ""}
${options.map(
diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts
index c71efcb98c..f92d355920 100644
--- a/src/dialogs/config-flow/step-flow-progress.ts
+++ b/src/dialogs/config-flow/step-flow-progress.ts
@@ -2,13 +2,13 @@ import "@material/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
+import { blankBeforePercent } from "../../common/translations/blank_before_percent";
import "../../components/ha-progress-ring";
import "../../components/ha-spinner";
import type { DataEntryFlowStepProgress } from "../../data/data_entry_flow";
import type { HomeAssistant } from "../../types";
import type { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
-import { blankBeforePercent } from "../../common/translations/blank_before_percent";
@customElement("step-flow-progress")
class StepFlowProgress extends LitElement {
@@ -24,14 +24,8 @@ class StepFlowProgress extends LitElement {
@property({ type: Number })
public progress?: number;
- @property({ type: Boolean, attribute: "increase-padding-end" })
- public increasePaddingEnd = false;
-
protected render(): TemplateResult {
return html`
-
+ ${this._error
+ ? html`${this._error} `
+ : nothing}
- ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)} -
${this.progress
? html`
diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts
index 0e2aca3e7b..dce0b9c326 100644
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -8,23 +8,23 @@ export const configFlowContentStyles = css`
padding: 0 24px;
padding-inline-start: 24px;
padding-inline-end: 24px;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+ -webkit-font-smoothing: var(--ha-font-smoothing);
font-family: var(
--mdc-typography-headline6-font-family,
- var(--mdc-typography-font-family, Roboto, sans-serif)
+ var(--mdc-typography-font-family, var(--ha-font-family-body))
);
- font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
+ font-size: var(--mdc-typography-headline6-font-size, var(--ha-font-size-l));
line-height: var(--mdc-typography-headline6-line-height, 2rem);
- font-weight: var(--mdc-typography-headline6-font-weight, 500);
+ font-weight: var(
+ --mdc-typography-headline6-font-weight,
+ var(--ha-font-weight-medium)
+ );
letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
text-transform: var(--mdc-typography-headline6-text-transform, inherit);
box-sizing: border-box;
}
- h2.end-space {
- padding-inline-end: 72px;
- }
.content,
.preview {
diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts
index 933567705e..0eb95992a1 100644
--- a/src/dialogs/enter-code/dialog-enter-code.ts
+++ b/src/dialogs/enter-code/dialog-enter-code.ts
@@ -222,13 +222,12 @@ export class DialogEnterCode
grid-column-start: 6;
}
}
-
ha-control-button {
width: 56px;
height: 56px;
--control-button-border-radius: 28px;
--mdc-icon-size: 24px;
- font-size: 24px;
+ font-size: var(--ha-font-size-2xl);
}
.submit {
--control-button-background-color: var(--green-color);
@@ -238,12 +237,6 @@ export class DialogEnterCode
--control-button-background-color: var(--red-color);
--control-button-icon-color: var(--red-color);
}
- .hidden {
- display: none;
- }
- .buttons {
- margin-top: 12px;
- }
`;
}
diff --git a/src/dialogs/more-info/components/ha-more-info-state-header.ts b/src/dialogs/more-info/components/ha-more-info-state-header.ts
index e166517bab..652b2591fc 100644
--- a/src/dialogs/more-info/components/ha-more-info-state-header.ts
+++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts
@@ -74,15 +74,15 @@ export class HaMoreInfoStateHeader extends LitElement {
}
.state {
font-style: normal;
- font-weight: 400;
+ font-weight: var(--ha-font-weight-normal);
font-size: 36px;
- line-height: 44px;
+ line-height: var(--ha-line-height-condensed);
}
.last-changed {
font-style: normal;
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
+ font-size: var(--ha-font-size-l);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-normal);
letter-spacing: 0.1px;
padding: 4px 0;
margin-bottom: 20px;
diff --git a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
index 2f3480646d..13c75f639c 100644
--- a/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-temp-picker.ts
@@ -185,7 +185,7 @@ class LightColorTempPicker extends LitElement {
top,
var(--gradient)
);
- --control-slider-tooltip-font-size: 20px;
+ --control-slider-tooltip-font-size: var(--ha-font-size-xl);
--control-slider-background-opacity: 1;
}
`,
diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts
index e3842dc053..e45fe3a633 100644
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -45,8 +45,7 @@ class MoreInfoCamera extends LitElement {
${this.hass.localize(
"ui.dialogs.more_info_control.camera.download_snapshot"
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index f265a1d916..3b47c52c45 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -530,16 +530,16 @@ class MoreInfoClimate extends LitElement {
.current .label {
opacity: 0.8;
- font-size: 14px;
- line-height: 16px;
+ font-size: var(--ha-font-size-m);
+ line-height: var(--ha-line-height-condensed);
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.current .value {
- font-size: 22px;
- font-weight: 500;
- line-height: 28px;
+ font-size: var(--ha-font-size-xl);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-condensed);
direction: ltr;
}
ha-select {
@@ -554,7 +554,7 @@ class MoreInfoClimate extends LitElement {
.target-humidity {
width: 90px;
- font-size: 200%;
+ font-size: var(--ha-font-size-3xl);
margin: auto;
direction: ltr;
}
diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts
index 77f5556413..71407b22a4 100644
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -233,15 +233,15 @@ class MoreInfoHumidifier extends LitElement {
}
.current .label {
opacity: 0.8;
- font-size: 14px;
- line-height: 16px;
+ font-size: var(--ha-font-size-m);
+ line-height: var(--ha-line-height-condensed);
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.current .value {
- font-size: 22px;
- font-weight: 500;
- line-height: 28px;
+ font-size: var(--ha-font-size-xl);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-condensed);
direction: ltr;
}
`,
diff --git a/src/dialogs/more-info/controls/more-info-lawn_mower.ts b/src/dialogs/more-info/controls/more-info-lawn_mower.ts
index 399e2c348c..117e4c942f 100644
--- a/src/dialogs/more-info/controls/more-info-lawn_mower.ts
+++ b/src/dialogs/more-info/controls/more-info-lawn_mower.ts
@@ -178,7 +178,7 @@ class MoreInfoLawnMower extends LitElement {
static styles = css`
:host {
- line-height: 1.5;
+ line-height: var(--ha-line-height-normal);
}
.status-subtitle {
color: var(--secondary-text-color);
diff --git a/src/dialogs/more-info/controls/more-info-lock.ts b/src/dialogs/more-info/controls/more-info-lock.ts
index 287199cc06..260702fa53 100644
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -165,7 +165,7 @@ class MoreInfoLock extends LitElement {
moreInfoControlStyle,
css`
ha-control-button {
- font-size: 14px;
+ font-size: var(--ha-font-size-m);
height: 60px;
--control-button-border-radius: 24px;
}
@@ -182,7 +182,7 @@ class MoreInfoLock extends LitElement {
align-items: center;
flex-direction: row;
gap: 8px;
- font-weight: 500;
+ font-weight: var(--ha-font-weight-medium);
color: var(--success-color);
}
ha-control-button-group.jammed {
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 1de7b7c717..2140e9e3ab 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -4,6 +4,7 @@ import {
mdiLoginVariant,
mdiMusicNote,
mdiPlayBoxMultiple,
+ mdiSpeakerMultiple,
mdiVolumeHigh,
mdiVolumeMinus,
mdiVolumeOff,
@@ -20,6 +21,7 @@ import "../../../components/ha-select";
import "../../../components/ha-slider";
import "../../../components/ha-svg-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
+import { showJoinMediaPlayersDialog } from "../../../components/media-player/show-join-media-players-dialog";
import { isUnavailableState } from "../../../data/entity";
import type {
MediaPickedEvent,
@@ -46,6 +48,7 @@ class MoreInfoMediaPlayer extends LitElement {
const stateObj = this.stateObj;
const controls = computeMediaControls(stateObj, true);
+ const groupMembers = stateObj.attributes.group_members?.length;
return 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/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts
index ee8c9164fa..bbce32de5b 100644
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -467,9 +467,9 @@ class DialogRestart extends LitElement {
background-color: var(--divider-color);
}
.section {
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
+ font-size: var(--ha-font-size-m);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-condensed);
margin: 8px 0 4px 0;
padding-left: var(--mdc-list-side-padding, 20px);
padding-right: var(--mdc-list-side-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..fed10ad593
--- /dev/null
+++ b/src/dialogs/sidebar/dialog-edit-sidebar.ts
@@ -0,0 +1,233 @@
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement, nothing, type TemplateResult } 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-alert";
+import "../../components/ha-dialog-header";
+import "../../components/ha-fade-in";
+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 "../../components/ha-spinner";
+import {
+ fetchFrontendUserData,
+ saveFrontendUserData,
+} from "../../data/frontend";
+import type { HomeAssistant } from "../../types";
+import { showConfirmationDialog } from "../generic/show-dialog-box";
+
+@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[];
+
+ @state() private _error?: string;
+
+ /**
+ * If user has old localStorage values, show a confirmation dialog
+ */
+ @state() private _migrateToUserData = false;
+
+ public async showDialog(): Promise {
+ this._open = true;
+
+ this._getData();
+ }
+
+ private async _getData() {
+ try {
+ const data = await fetchFrontendUserData(this.hass.connection, "sidebar");
+ this._order = data?.panelOrder;
+ this._hidden = data?.hiddenPanels;
+
+ // fallback to old localStorage values
+ if (!this._order) {
+ const storedOrder = localStorage.getItem("sidebarPanelOrder");
+ this._migrateToUserData = !!storedOrder;
+ this._order = storedOrder ? JSON.parse(storedOrder) : [];
+ }
+ if (!this._hidden) {
+ const storedHidden = localStorage.getItem("sidebarHiddenPanels");
+ this._migrateToUserData = this._migrateToUserData || !!storedHidden;
+ this._hidden = storedHidden ? JSON.parse(storedHidden) : [];
+ }
+ } catch (err: any) {
+ this._error = err.message || err;
+ }
+ }
+
+ 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) : []
+ );
+
+ private _renderContent(): TemplateResult {
+ if (!this._order || !this._hidden) {
+ return html`${this._error} `;
+ }
+
+ 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`
+ `;
+ }
+
+ protected render() {
+ if (!this._open) {
+ return nothing;
+ }
+
+ const dialogTitle = this.hass.localize("ui.sidebar.edit_sidebar");
+
+ return html`
+
+
+
+
+ `;
+ }
+
+ private _changed(ev: CustomEvent<{ value: DisplayValue }>): void {
+ const { order = [], hidden = [] } = ev.detail.value;
+ this._order = [...order];
+ this._hidden = [...hidden];
+ }
+
+ private async _save() {
+ if (this._migrateToUserData) {
+ const confirmation = await showConfirmationDialog(this, {
+ destructive: true,
+ text: this.hass.localize("ui.sidebar.migrate_to_user_data"),
+ });
+ if (!confirmation) {
+ return;
+ }
+ }
+
+ try {
+ await saveFrontendUserData(this.hass.connection, "sidebar", {
+ panelOrder: this._order!,
+ hiddenPanels: this._hidden!,
+ });
+ } catch (err: any) {
+ this._error = err.message || err;
+ return;
+ }
+
+ 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%;
+ }
+ }
+
+ ha-fade-in {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ `;
+}
+
+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..dc8ce5b1ea
--- /dev/null
+++ b/src/dialogs/sidebar/show-dialog-edit-sidebar.ts
@@ -0,0 +1,11 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export const loadEditSidebarDialog = () => import("./dialog-edit-sidebar");
+
+export const showEditSidebarDialog = (element: HTMLElement): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-edit-sidebar",
+ dialogImport: loadEditSidebarDialog,
+ dialogParams: {},
+ });
+};
diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
index c2edcf4949..7777ab3ddd 100644
--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
@@ -153,23 +153,23 @@ export class CloudStepIntro extends LitElement {
display: flex;
align-items: center;
justify-content: center;
- font-size: 24px;
+ font-size: var(--ha-font-size-2xl);
}
.access .round-icon {
color: #00aef8;
background-color: #cceffe;
}
.feature h2 {
- font-weight: 500;
- font-size: 16px;
- line-height: 24px;
+ font-size: var(--ha-font-size-l);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-normal);
margin-top: 0;
margin-bottom: 8px;
}
.feature p {
- font-weight: 400;
- font-size: 14px;
- line-height: 20px;
+ font-size: var(--ha-font-size-m);
+ font-weight: var(--ha-font-weight-normal);
+ line-height: var(--ha-line-height-condensed);
margin: 0;
}
`,
diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts
index 699d9099dd..e0a0d04426 100644
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts
@@ -285,6 +285,7 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
.assistConfiguration=${this
._assistConfiguration}
.assistEntityId=${assistSatelliteEntityId}
+ .deviceId=${this._params.deviceId}
>`
: nothing}
diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
index 2f02ef0544..d995047403 100644
--- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
+++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts
@@ -4,6 +4,10 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
+import {
+ computeDeviceName,
+ computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
import "../../components/ha-list-item";
import "../../components/ha-select";
import "../../components/ha-tts-voice-picker";
@@ -18,6 +22,7 @@ import {
setWakeWords,
} from "../../data/assist_satellite";
import { fetchCloudStatus } from "../../data/cloud";
+import { updateDeviceRegistryEntry } from "../../data/device_registry";
import type { InputSelectEntity } from "../../data/input_select";
import { setSelectOption } from "../../data/select";
import { showVoiceAssistantPipelineDetailDialog } from "../../panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail";
@@ -40,6 +45,10 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
@state() private _ttsSettings?: any;
+ @state() private _error?: string;
+
+ private _deviceName?: string;
+
protected override willUpdate(changedProperties: PropertyValues): void {
super.willUpdate(changedProperties);
@@ -68,6 +77,8 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
] as InputSelectEntity)
: undefined;
+ const device = this.hass.devices[this.deviceId];
+
return html`
@@ -69,7 +72,7 @@ class MoreInfoMediaPlayer extends LitElement {
${!isUnavailableState(stateObj.state) &&
supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA)
? html`
-
-
+
+ `
+ : ""}
+ ${!isUnavailableState(stateObj.state) &&
+ supportsFeature(stateObj, MediaPlayerEntityFeature.GROUPING)
+ ? html`
+
+
`
: ""}
@@ -265,6 +287,23 @@ class MoreInfoMediaPlayer extends LitElement {
mwc-button > ha-svg-icon {
vertical-align: text-bottom;
}
+
+ .badge {
+ position: absolute;
+ top: 0;
+ left: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 16px;
+ min-width: 8px;
+ border-radius: 10px;
+ font-weight: var(--ha-font-weight-normal);
+ font-size: var(--ha-font-size-xs);
+ background-color: var(--accent-color);
+ padding: 0 4px;
+ color: var(--text-accent-color, var(--text-primary-color));
+ }
`;
private _handleClick(e: MouseEvent): void {
@@ -328,6 +367,12 @@ class MoreInfoMediaPlayer extends LitElement {
),
});
}
+
+ private _showGroupMediaPlayers(): void {
+ showJoinMediaPlayersDialog(this, {
+ entityId: this.stateObj!.entity_id,
+ });
+ }
}
declare global {
diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts
index 39d6652c56..2b24ad8646 100644
--- a/src/dialogs/more-info/controls/more-info-script.ts
+++ b/src/dialogs/more-info/controls/more-info-script.ts
@@ -226,7 +226,7 @@ class MoreInfoScript extends LitElement {
margin-bottom: 16px;
}
.fields .title {
- font-weight: bold;
+ font-weight: var(--ha-font-weight-bold);
}
ha-control-button ha-svg-icon {
z-index: -1;
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/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts
index 9596678775..5cfc75eb73 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@@ -317,7 +317,7 @@ class MoreInfoVacuum extends LitElement {
static styles = css`
:host {
- line-height: 1.5;
+ line-height: var(--ha-line-height-normal);
}
.status-subtitle {
color: var(--secondary-text-color);
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.ts b/src/dialogs/more-info/controls/more-info-water_heater.ts
index 28f831e093..7d7d59e8ef 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.ts
+++ b/src/dialogs/more-info/controls/more-info-water_heater.ts
@@ -234,16 +234,16 @@ class MoreInfoWaterHeater extends LitElement {
.current .label {
opacity: 0.8;
- font-size: 14px;
- line-height: 16px;
+ font-size: var(--ha-font-size-m);
+ line-height: var(--ha-line-height-condensed);
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.current .value {
- font-size: 22px;
- font-weight: 500;
- line-height: 28px;
+ font-size: var(--ha-font-size-xl);
+ font-weight: var(--ha-font-weight-medium);
+ line-height: var(--ha-line-height-condensed);
direction: ltr;
}
`,
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index 06063284cc..e357ff8042 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -512,18 +512,18 @@ class MoreInfoWeather extends LitElement {
.temp-attribute .temp span {
position: absolute;
- font-size: 24px;
+ font-size: var(--ha-font-size-2xl);
top: 1px;
}
.state,
.temp-attribute .temp {
- font-size: 28px;
- line-height: 1.2;
+ font-size: var(--ha-font-size-3xl);
+ line-height: var(--ha-line-height-condensed);
}
.attribute {
- font-size: 14px;
+ font-size: var(--ha-font-size-m);
line-height: 1;
}
@@ -570,7 +570,7 @@ class MoreInfoWeather extends LitElement {
}
.forecast .temp {
- font-size: 16px;
+ font-size: var(--ha-font-size-l);
}
.forecast-image-icon {
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index a15d2d7765..4ae42dd862 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -679,13 +679,13 @@ export class MoreInfoDialog extends LitElement {
.title .main {
color: var(--primary-text-color);
- font-size: 20px;
- line-height: 24px;
+ font-size: var(--ha-font-size-xl);
+ line-height: var(--ha-line-height-condensed);
}
.title .breadcrumb {
color: var(--secondary-text-color);
- font-size: 14px;
+ font-size: var(--ha-font-size-m);
line-height: 16px;
--mdc-icon-size: 16px;
padding: 4px;
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/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts
index b12c8ff73d..b2bb5cdeee 100644
--- a/src/dialogs/notifications/notification-item-template.ts
+++ b/src/dialogs/notifications/notification-item-template.ts
@@ -27,6 +27,7 @@ export class HuiNotificationItemTemplate extends LitElement {
ha-card .header {
font-family: var(--ha-font-family-body);
-webkit-font-smoothing: var(--ha-font-smoothing);
+ -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
font-size: var(--ha-font-size-2xl);
font-weight: var(--ha-font-weight-normal);
line-height: var(--ha-line-height-condensed);
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`
+ ${item.translatedDomain}
+
`
+ : nothing}
`;
}
@@ -549,23 +573,44 @@ export class QuickBar extends LitElement {
);
}
- private _generateDeviceItems(): DeviceItem[] {
+ private async _generateDeviceItems(): Promise${this._renderContent()}
+
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.common.save")}
+
+
+
+ ${this._error
+ ? html`
+
+
${this.assistConfiguration &&
this.assistConfiguration.available_wake_words.length > 1
? html`
@@ -156,7 +180,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {