Migrate upgrade dropdown

* Add basic editor to edit favorites entities for home panel

* Rename favorites

* Rename favorites

* Feedbacks

src/auth/ha-auth-flow.ts

@@ -59,7 +59,8 @@ export class HaAuthFlow extends LitElement {
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
-    if (!this.hasUpdated) {
+    if (!this.hasUpdated && this.clientId === genClientId()) {
+      // Preselect store token when logging in to own instance
       this._storeToken = this.initStoreToken;
     }
 

src/common/color/colors.ts

@@ -1,16 +1,64 @@
 import memoizeOne from "memoize-one";
 import { theme2hex } from "./convert-color";
 
-// Total number of colors defined in CSS variables (--color-1 through --color-54)
-export const COLORS_COUNT = 54;
+export const COLORS = [
+  "#4269d0",
+  "#f4bd4a",
+  "#ff725c",
+  "#6cc5b0",
+  "#a463f2",
+  "#ff8ab7",
+  "#9c6b4e",
+  "#97bbf5",
+  "#01ab63",
+  "#094bad",
+  "#c99000",
+  "#d84f3e",
+  "#49a28f",
+  "#048732",
+  "#d96895",
+  "#8043ce",
+  "#7599d1",
+  "#7a4c31",
+  "#6989f4",
+  "#ffd444",
+  "#ff957c",
+  "#8fe9d3",
+  "#62cc71",
+  "#ffadda",
+  "#c884ff",
+  "#badeff",
+  "#bf8b6d",
+  "#927acc",
+  "#97ee3f",
+  "#bf3947",
+  "#9f5b00",
+  "#f48758",
+  "#8caed6",
+  "#f2b94f",
+  "#eff26e",
+  "#e43872",
+  "#d9b100",
+  "#9d7a00",
+  "#698cff",
+  "#00d27e",
+  "#d06800",
+  "#009f82",
+  "#c49200",
+  "#cbe8ff",
+  "#fecddf",
+  "#c27eb6",
+  "#8cd2ce",
+  "#c4b8d9",
+  "#f883b0",
+  "#a49100",
+  "#f48800",
+  "#27d0df",
+  "#a04a9b",
+];
 
-export function getColorByIndex(
-  index: number,
-  style: CSSStyleDeclaration
-): string {
-  // Wrap around using modulo to support unlimited indices
-  const colorIndex = (index % COLORS_COUNT) + 1;
-  return style.getPropertyValue(`--color-${colorIndex}`);
+export function getColorByIndex(index: number) {
+  return COLORS[index % COLORS.length];
 }
 
 export function getGraphColorByIndex(
@@ -20,19 +68,15 @@ export function getGraphColorByIndex(
   // The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
   const themeColor =
     style.getPropertyValue(`--graph-color-${index + 1}`) ||
-    getColorByIndex(index, style);
+    getColorByIndex(index);
   return theme2hex(themeColor);
 }
 
 export const getAllGraphColors = memoizeOne(
   (style: CSSStyleDeclaration) =>
-    Array.from({ length: COLORS_COUNT }, (_, index) =>
-      getGraphColorByIndex(index, style)
-    ),
+    COLORS.map((_color, index) => getGraphColorByIndex(index, style)),
   (newArgs: [CSSStyleDeclaration], lastArgs: [CSSStyleDeclaration]) =>
     // this is not ideal, but we need to memoize the colors
     newArgs[0].getPropertyValue("--graph-color-1") ===
-      lastArgs[0].getPropertyValue("--graph-color-1") &&
-    newArgs[0].getPropertyValue("--color-1") ===
-      lastArgs[0].getPropertyValue("--color-1")
+    lastArgs[0].getPropertyValue("--graph-color-1")
 );

src/components/chart/ha-chart-base.ts

@@ -597,10 +597,15 @@ export class HaChartBase extends LitElement {
       aria: { show: true },
       dataZoom: this._getDataZoomConfig(),
       toolbox: {
-        top: Infinity,
-        left: Infinity,
+        top: Number.MAX_SAFE_INTEGER,
+        left: Number.MAX_SAFE_INTEGER,
         feature: {
-          dataZoom: { show: true, yAxisIndex: false, filterMode: "none" },
+          dataZoom: {
+            show: true,
+            yAxisIndex: false,
+            filterMode: "none",
+            showTitle: false,
+          },
         },
         iconStyle: { opacity: 0 },
       },

src/components/ha-assist-chat.ts

@@ -17,6 +17,7 @@ import type { HomeAssistant } from "../types";
 import { AudioRecorder } from "../util/audio-recorder";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-alert";
+import "./ha-markdown";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
@@ -40,7 +41,11 @@ export class HaAssistChat extends LitElement {
 
   @query("#message-input") private _messageInput!: HaTextField;
 
-  @query("#scroll-container") private _scrollContainer!: HTMLDivElement;
+  @query(".message:last-child")
+  private _lastChatMessage!: LitElement;
+
+  @query(".message:last-child img:last-of-type")
+  private _lastChatMessageImage: HTMLImageElement | undefined;
 
   @state() private _conversation: AssistMessage[] = [];
 
@@ -92,10 +97,7 @@ export class HaAssistChat extends LitElement {
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._audioRecorder?.close();
-    this._audioRecorder = undefined;
     this._unloadAudio();
-    this._conversation = [];
-    this._conversationId = null;
   }
 
   protected render(): TemplateResult {
@@ -112,7 +114,7 @@ export class HaAssistChat extends LitElement {
     const supportsSTT = this.pipeline?.stt_engine && !this.disableSpeech;
 
     return html`
-      <div class="messages" id="scroll-container">
+      <div class="messages">
         ${controlHA
           ? nothing
           : html`
@@ -124,11 +126,18 @@ export class HaAssistChat extends LitElement {
             `}
         <div class="spacer"></div>
         ${this._conversation!.map(
-          // New lines matter for messages
-          // prettier-ignore
           (message) => html`
-                <div class="message ${classMap({ error: !!message.error, [message.who]: true })}">${message.text}</div>
-              `
+            <ha-markdown
+              class="message ${classMap({
+                error: !!message.error,
+                [message.who]: true,
+              })}"
+              breaks
+              cache
+              .content=${message.text}
+            >
+            </ha-markdown>
+          `
         )}
       </div>
       <div class="input" slot="primaryAction">
@@ -189,12 +198,28 @@ export class HaAssistChat extends LitElement {
     `;
   }
 
-  private _scrollMessagesBottom() {
-    const scrollContainer = this._scrollContainer;
-    if (!scrollContainer) {
-      return;
+  private async _scrollMessagesBottom() {
+    const lastChatMessage = this._lastChatMessage;
+    if (!lastChatMessage.hasUpdated) {
+      await lastChatMessage.updateComplete;
+    }
+    if (
+      this._lastChatMessageImage &&
+      !this._lastChatMessageImage.naturalHeight
+    ) {
+      try {
+        await this._lastChatMessageImage.decode();
+      } catch (err: any) {
+        // eslint-disable-next-line no-console
+        console.warn("Failed to decode image:", err);
+      }
+    }
+    const isLastMessageFullyVisible =
+      lastChatMessage.getBoundingClientRect().y <
+      this.getBoundingClientRect().top + 24;
+    if (!isLastMessageFullyVisible) {
+      lastChatMessage.scrollIntoView({ behavior: "smooth", block: "start" });
     }
-    scrollContainer.scrollTo(0, scrollContainer.scrollHeight);
   }
 
   private _handleKeyUp(ev: KeyboardEvent) {
@@ -586,42 +611,31 @@ export class HaAssistChat extends LitElement {
       flex: 1;
     }
     .message {
-      white-space: pre-line;
       font-size: var(--ha-font-size-l);
       clear: both;
+      max-width: -webkit-fill-available;
+      overflow-wrap: break-word;
+      scroll-margin-top: 24px;
       margin: 8px 0;
       padding: 8px;
       border-radius: var(--ha-border-radius-xl);
     }
-    .message:last-child {
-      margin-bottom: 0;
-    }
-
     @media all and (max-width: 450px), all and (max-height: 500px) {
       .message {
         font-size: var(--ha-font-size-l);
       }
     }
-
-    .message p {
-      margin: 0;
-    }
-    .message p:not(:last-child) {
-      margin-bottom: 8px;
-    }
-
     .message.user {
       margin-left: 24px;
       margin-inline-start: 24px;
       margin-inline-end: initial;
       align-self: flex-end;
-      text-align: right;
       border-bottom-right-radius: 0px;
+      --markdown-link-color: var(--text-primary-color);
       background-color: var(--chat-background-color-user, var(--primary-color));
       color: var(--text-primary-color);
       direction: var(--direction);
     }
-
     .message.hass {
       margin-right: 24px;
       margin-inline-end: 24px;
@@ -636,20 +650,21 @@ export class HaAssistChat extends LitElement {
       color: var(--primary-text-color);
       direction: var(--direction);
     }
-
-    .message.user a {
-      color: var(--text-primary-color);
-    }
-
-    .message.hass a {
-      color: var(--primary-text-color);
-    }
-
     .message.error {
       background-color: var(--error-color);
       color: var(--text-primary-color);
     }
-
+    ha-markdown {
+      --markdown-image-border-radius: calc(var(--ha-border-radius-xl) / 2);
+      --markdown-table-border-color: var(--divider-color);
+      --markdown-code-background-color: var(--primary-background-color);
+      --markdown-code-text-color: var(--primary-text-color);
+      &:not(:has(ha-markdown-element)) {
+        min-height: 1lh;
+        min-width: 1lh;
+        flex-shrink: 0;
+      }
+    }
     .bouncer {
       width: 48px;
       height: 48px;

src/components/ha-markdown-element.ts

@@ -1,11 +1,15 @@
 import type { PropertyValues } from "lit";
-import { ReactiveElement } from "lit";
+import { ReactiveElement, render, html } from "lit";
 import { customElement, property } from "lit/decorators";
+// eslint-disable-next-line import/extensions
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import hash from "object-hash";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 import { CacheManager } from "../util/cache-manager";
 
+const h = (template: ReturnType<typeof unsafeHTML>) => html`${template}`;
+
 const markdownCache = new CacheManager<string>(1000);
 
 const _gitHubMarkdownAlerts = {
@@ -48,18 +52,26 @@ class HaMarkdownElement extends ReactiveElement {
     return this;
   }
 
+  private _renderPromise: ReturnType<typeof this._render> = Promise.resolve();
+
   protected update(changedProps) {
     super.update(changedProps);
     if (this.content !== undefined) {
-      this._render();
+      this._renderPromise = this._render();
     }
   }
 
+  protected async getUpdateComplete(): Promise<boolean> {
+    await super.getUpdateComplete();
+    await this._renderPromise;
+    return true;
+  }
+
   protected willUpdate(_changedProperties: PropertyValues): void {
     if (!this.innerHTML && this.cache) {
       const key = this._computeCacheKey();
       if (markdownCache.has(key)) {
-        this.innerHTML = markdownCache.get(key)!;
+        render(markdownCache.get(key)!, this.renderRoot);
         this._resize();
       }
     }
@@ -75,7 +87,7 @@ class HaMarkdownElement extends ReactiveElement {
   }
 
   private async _render() {
-    this.innerHTML = await renderMarkdown(
+    const elements = await renderMarkdown(
       String(this.content),
       {
         breaks: this.breaks,
@@ -87,6 +99,11 @@ class HaMarkdownElement extends ReactiveElement {
       }
     );
 
+    render(
+      elements.map((e) => h(unsafeHTML(e))),
+      this.renderRoot
+    );
+
     this._resize();
 
     const walker = document.createTreeWalker(

src/components/ha-markdown.ts

@@ -1,5 +1,12 @@
-import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type ReactiveElement,
+  type CSSResultGroup,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "./ha-markdown-element";
 
 @customElement("ha-markdown")
@@ -18,6 +25,14 @@ export class HaMarkdown extends LitElement {
 
   @property({ type: Boolean }) public cache = false;
 
+  @query("ha-markdown-element") private _markdownElement!: ReactiveElement;
+
+  protected async getUpdateComplete() {
+    const result = await super.getUpdateComplete();
+    await this._markdownElement.updateComplete;
+    return result;
+  }
+
   protected render() {
     if (!this.content) {
       return nothing;
@@ -53,19 +68,46 @@ export class HaMarkdown extends LitElement {
       margin: var(--ha-space-1) 0;
     }
     a {
-      color: var(--primary-color);
+      color: var(--markdown-link-color, var(--primary-color));
     }
     img {
+      background-color: rgba(10, 10, 10, 0.15);
+      border-radius: var(--markdown-image-border-radius);
       max-width: 100%;
+      min-height: 2lh;
+      height: auto;
+      width: auto;
+      text-indent: 4px;
+      transition: height 0.2s ease-in-out;
+    }
+    p:first-child > img:first-child {
+      vertical-align: top;
+    }
+    p:first-child > img:last-child {
+      vertical-align: top;
+    }
+    ol,
+    ul {
+      list-style-position: inside;
+      padding-inline-start: 0;
+    }
+    li {
+      &:has(input[type="checkbox"]) {
+        list-style: none;
+        & > input[type="checkbox"] {
+          margin-left: 0;
+        }
+      }
+    }
+    svg {
+      background-color: var(--markdown-svg-background-color, none);
+      color: var(--markdown-svg-color, none);
     }
     code,
     pre {
       background-color: var(--markdown-code-background-color, none);
       border-radius: var(--ha-border-radius-sm);
-    }
-    svg {
-      background-color: var(--markdown-svg-background-color, none);
-      color: var(--markdown-svg-color, none);
+      color: var(--markdown-code-text-color, inherit);
     }
     code {
       font-size: var(--ha-font-size-s);
@@ -97,6 +139,24 @@ export class HaMarkdown extends LitElement {
       border-bottom: none;
       margin: var(--ha-space-4) 0;
     }
+    table {
+      border-collapse: collapse;
+      display: block;
+      overflow-x: auto;
+    }
+    th {
+      text-align: start;
+    }
+    td,
+    th {
+      border: 1px solid var(--markdown-table-border-color, transparent);
+      padding: 0.25em 0.5em;
+    }
+    blockquote {
+      border-left: 4px solid var(--divider-color);
+      margin-inline: 0;
+      padding-inline: 1em;
+    }
   ` as CSSResultGroup;
 }
 

src/data/backup.ts

@@ -10,6 +10,7 @@ import {
 import { formatTime } from "../common/datetime/format_time";
 import type { LocalizeFunc } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
 import { fileDownload } from "../util/file_download";
 import { handleFetchPromise } from "../util/hass-call-api";
 import type { BackupManagerState, ManagerStateEvent } from "./backup_manager";
@@ -414,7 +415,7 @@ ${hass.auth.data.hassUrl}
 ${hass.localize("ui.panel.config.backup.emergency_kit_file.encryption_key")}
 ${encryptionKey}
 
-${hass.localize("ui.panel.config.backup.emergency_kit_file.more_info", { link: "https://www.home-assistant.io/more-info/backup-emergency-kit" })}`);
+${hass.localize("ui.panel.config.backup.emergency_kit_file.more_info", { link: documentationUrl(hass, "/more-info/backup-emergency-kit") })}`);
 
 export const geneateEmergencyKitFileName = (
   hass: HomeAssistant,

src/data/calendar.ts

@@ -137,12 +137,8 @@ const getCalendarDate = (dateObj: any): string | undefined => {
   return undefined;
 };
 
-export const getCalendars = (
-  hass: HomeAssistant,
-  element: Element
-): Calendar[] => {
-  const computedStyles = getComputedStyle(element);
-  return Object.keys(hass.states)
+export const getCalendars = (hass: HomeAssistant): Calendar[] =>
+  Object.keys(hass.states)
     .filter(
       (eid) =>
         computeDomain(eid) === "calendar" &&
@@ -153,9 +149,8 @@ export const getCalendars = (
     .map((eid, idx) => ({
       ...hass.states[eid],
       name: computeStateName(hass.states[eid]),
-      backgroundColor: getColorByIndex(idx, computedStyles),
+      backgroundColor: getColorByIndex(idx),
     }));
-};
 
 export const createCalendarEvent = (
   hass: HomeAssistant,

src/data/frontend.ts

@@ -3,7 +3,7 @@ import type { Connection } from "home-assistant-js-websocket";
 export interface CoreFrontendUserData {
   showAdvanced?: boolean;
   showEntityIdPicker?: boolean;
-  defaultPanel?: string;
+  default_panel?: string;
 }
 
 export interface SidebarFrontendUserData {
@@ -12,7 +12,11 @@ export interface SidebarFrontendUserData {
 }
 
 export interface CoreFrontendSystemData {
-  defaultPanel?: string;
+  default_panel?: string;
+}
+
+export interface HomeFrontendSystemData {
+  favorite_entities?: string[];
 }
 
 declare global {
@@ -22,6 +26,7 @@ declare global {
   }
   interface FrontendSystemData {
     core: CoreFrontendSystemData;
+    home: HomeFrontendSystemData;
   }
 }
 

src/data/panel.ts

@@ -9,8 +9,8 @@ export const getLegacyDefaultPanelUrlPath = (): string | null => {
 };
 
 export const getDefaultPanelUrlPath = (hass: HomeAssistant): string =>
-  hass.userData?.defaultPanel ||
-  hass.systemData?.defaultPanel ||
+  hass.userData?.default_panel ||
+  hass.systemData?.default_panel ||
   getLegacyDefaultPanelUrlPath() ||
   DEFAULT_PANEL;
 

src/layouts/supervisor-error-screen.ts

@@ -5,6 +5,7 @@ import { atLeastVersion } from "../common/config/version";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import "../components/ha-card";
 import { haStyle } from "../resources/styles";
+import { documentationUrl } from "../util/documentation-url";
 import type { HomeAssistant } from "../types";
 import "./hass-subpage";
 
@@ -57,7 +58,7 @@ class SupervisorErrorScreen extends LitElement {
               </li>
               <li>
                 <a
-                  href="https://www.home-assistant.io/help/"
+                  href=${documentationUrl(this.hass, "/help/")}
                   target="_blank"
                   rel="noreferrer"
                 >

src/onboarding/onboarding-welcome-links.ts

@@ -4,6 +4,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
+import { documentationUrl } from "../util/documentation-url";
 import type { HomeAssistant } from "../types";
 import { showAppDialog } from "./dialogs/show-app-dialog";
 import { showCommunityDialog } from "./dialogs/show-community-dialog";
@@ -22,7 +23,10 @@ class OnboardingWelcomeLinks extends LitElement {
     return html`<a
         target="_blank"
         rel="noreferrer noopener"
-        href="https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/"
+        href=${documentationUrl(
+          this.hass,
+          "/blog/2016/01/19/perfect-home-automation/"
+        )}
       >
         <onboarding-welcome-link
           noninteractive

src/panels/calendar/ha-panel-calendar.ts

@@ -87,7 +87,7 @@ class PanelCalendar extends LitElement {
   public willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (!this.hasUpdated) {
-      this._calendars = getCalendars(this.hass, this);
+      this._calendars = getCalendars(this.hass);
     }
   }
 
@@ -243,7 +243,7 @@ class PanelCalendar extends LitElement {
       manifest: await fetchIntegrationManifest(this.hass, "local_calendar"),
       dialogClosedCallback: ({ flowFinished }) => {
         if (flowFinished) {
-          this._calendars = getCalendars(this.hass, this);
+          this._calendars = getCalendars(this.hass);
         }
       },
     });

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -2,6 +2,7 @@ import { mdiClose, mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { documentationUrl } from "../../../util/documentation-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-code-editor";
@@ -140,7 +141,7 @@ class DialogImportBlueprint extends LitElement {
                 <ha-button
                   size="small"
                   appearance="plain"
-                  href="https://www.home-assistant.io/get-blueprints"
+                  href=${documentationUrl(this.hass, "/get-blueprints")}
                   target="_blank"
                   rel="noreferrer noopener"
                 >

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -299,7 +299,7 @@ class HaBlueprintOverview extends LitElement {
         >
           <ha-button
             appearance="plain"
-            href="https://www.home-assistant.io/get-blueprints"
+            href=${documentationUrl(this.hass, "/get-blueprints")}
             target="_blank"
             rel="noreferrer noopener"
             size="small"

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

@@ -1,4 +1,3 @@
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical, mdiRefresh } from "@mdi/js";
 import type { HassEntities } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
@@ -6,7 +5,6 @@ import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-alert";
 import "../../../components/ha-bar";
 import "../../../components/ha-button-menu";
@@ -33,6 +31,9 @@ import "../../../layouts/hass-subpage";
 import type { HomeAssistant } from "../../../types";
 import "../dashboard/ha-config-updates";
 import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
+import "../../../components/ha-dropdown";
+import "../../../components/ha-dropdown-item";
+import "@home-assistant/webawesome/dist/components/divider/divider";
 
 @customElement("ha-config-section-updates")
 class HaConfigSectionUpdates extends LitElement {
@@ -73,24 +74,25 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-button-menu multi>
+          <ha-dropdown @wa-select=${this._handleOverflowAction}>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-check-list-item
-              left
-              @request-selected=${this._toggleSkipped}
-              .selected=${this._showSkipped}
+
+            <ha-dropdown-item
+              type="checkbox"
+              value="show_skipped"
+              .checked=${this._showSkipped}
             >
               ${this.hass.localize("ui.panel.config.updates.show_skipped")}
-            </ha-check-list-item>
+            </ha-dropdown-item>
             ${this._supervisorInfo
               ? html`
-                  <li divider role="separator"></li>
-                  <ha-list-item
-                    @request-selected=${this._toggleBeta}
+                  <wa-divider></wa-divider>
+                  <ha-dropdown-item
+                    value="toggle_beta"
                     .disabled=${this._supervisorInfo.channel === "dev"}
                   >
                     ${this._supervisorInfo.channel === "stable"
@@ -98,10 +100,10 @@ class HaConfigSectionUpdates extends LitElement {
                       : this.hass.localize(
                           "ui.panel.config.updates.leave_beta"
                         )}
-                  </ha-list-item>
+                  </ha-dropdown-item>
                 `
               : ""}
-          </ha-button-menu>
+          </ha-dropdown>
         </div>
         <div class="content">
           <ha-card outlined>
@@ -133,27 +135,19 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
-    if (ev.detail.source !== "property") {
-      return;
-    }
-
-    this._showSkipped = !this._showSkipped;
-  }
-
-  private async _toggleBeta(
-    ev: CustomEvent<RequestSelectedDetail>
+  private async _handleOverflowAction(
+    ev: CustomEvent<{ item: { value: string } }>
   ): Promise<void> {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-
-    if (this._supervisorInfo!.channel === "stable") {
-      showJoinBetaDialog(this, {
-        join: async () => this._setChannel("beta"),
-      });
-    } else {
-      this._setChannel("stable");
+    if (ev.detail.item.value === "toggle_beta") {
+      if (this._supervisorInfo!.channel === "stable") {
+        showJoinBetaDialog(this, {
+          join: async () => this._setChannel("beta"),
+        });
+      } else {
+        this._setChannel("stable");
+      }
+    } else if (ev.detail.item.value === "show_skipped") {
+      this._showSkipped = !this._showSkipped;
     }
   }
 

src/panels/config/energy/components/ha-energy-validation-result.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-alert";
 import type { EnergyValidationIssue } from "../../../../data/energy";
+import { documentationUrl } from "../../../../util/documentation-url";
 import type { HomeAssistant } from "../../../../types";
 
 @customElement("ha-energy-validation-result")
@@ -29,7 +30,10 @@ class EnergyValidationMessage extends LitElement {
           )}
           ${issue.type === "recorder_untracked"
             ? html`(<a
-                  href="https://www.home-assistant.io/integrations/recorder#configure-filter"
+                  href=${documentationUrl(
+                    this.hass,
+                    "/integrations/recorder#configure-filter"
+                  )}
                   target="_blank"
                   rel="noopener noreferrer"
                   >${this.hass.localize("ui.panel.config.common.learn_more")}</a

src/panels/config/integrations/ha-config-flow-card.ts

@@ -1,4 +1,10 @@
-import { mdiBookshelf, mdiCog, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
+import {
+  mdiBookshelf,
+  mdiCog,
+  mdiDelete,
+  mdiDotsVertical,
+  mdiOpenInNew,
+} from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -7,6 +13,11 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-list-item";
+import {
+  deleteApplicationCredential,
+  fetchApplicationCredentialsConfigEntry,
+} from "../../../data/application_credential";
+import { deleteConfigEntry } from "../../../data/config_entries";
 import {
   ATTENTION_SOURCES,
   DISCOVERY_SOURCES,
@@ -15,7 +26,10 @@ import {
 } from "../../../data/config_flow";
 import type { IntegrationManifest } from "../../../data/integration";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
@@ -60,7 +74,7 @@ export class HaConfigFlowCard extends LitElement {
               : "ui.common.add"
           )}
         </ha-button>
-        ${this.flow.context.configuration_url || this.manifest
+        ${this.flow.context.configuration_url || this.manifest || attention
           ? html`<ha-button-menu slot="header-button">
               <ha-icon-button
                 slot="trigger"
@@ -118,6 +132,22 @@ export class HaConfigFlowCard extends LitElement {
                     </ha-list-item>
                   </a>`
                 : ""}
+              ${attention
+                ? html`<ha-list-item
+                    class="warning"
+                    graphic="icon"
+                    @click=${this._handleDelete}
+                  >
+                    <ha-svg-icon
+                      class="warning"
+                      slot="graphic"
+                      .path=${mdiDelete}
+                    ></ha-svg-icon>
+                    ${this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.delete"
+                    )}
+                  </ha-list-item>`
+                : ""}
             </ha-button-menu>`
           : ""}
       </ha-integration-action-card>
@@ -175,6 +205,109 @@ export class HaConfigFlowCard extends LitElement {
     });
   }
 
+  // Return an application credentials id for this config entry to prompt the
+  // user for removal. This is best effort so we don't stop overall removal
+  // if the integration isn't loaded or there is some other error.
+  private async _fetchApplicationCredentials(entryId: string) {
+    try {
+      return (await fetchApplicationCredentialsConfigEntry(this.hass, entryId))
+        .application_credentials_id;
+    } catch (_err: any) {
+      // We won't prompt the user to remove credentials
+      return null;
+    }
+  }
+
+  private async _removeApplicationCredential(applicationCredentialsId: string) {
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.application_credentials.delete_title"
+      ),
+      text: html`${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_prompt"
+        )},
+        <br />
+        <br />
+        ${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_detail"
+        )}
+        <br />
+        <br />
+        <a
+          href="https://www.home-assistant.io/integrations/application_credentials"
+          target="_blank"
+          rel="noreferrer"
+        >
+          ${this.hass.localize(
+            "ui.panel.config.integrations.config_entry.application_credentials.learn_more"
+          )}
+        </a>`,
+      confirmText: this.hass.localize("ui.common.delete"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await deleteApplicationCredential(this.hass, applicationCredentialsId);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.application_credentials.delete_error_title"
+        ),
+        text: err.message,
+      });
+    }
+  }
+
+  private async _handleDelete() {
+    const entryId = this.flow.context.entry_id;
+
+    if (!entryId) {
+      // This shouldn't happen for reauth flows, but handle gracefully
+      return;
+    }
+
+    const applicationCredentialsId =
+      await this._fetchApplicationCredentials(entryId);
+
+    const confirmed = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.delete_confirm_title",
+        { title: localizeConfigFlowTitle(this.hass.localize, this.flow) }
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.integrations.config_entry.delete_confirm_text"
+      ),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      dismissText: this.hass!.localize("ui.common.cancel"),
+      destructive: true,
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    const result = await deleteConfigEntry(this.hass, entryId);
+
+    if (result.require_restart) {
+      showAlertDialog(this, {
+        text: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.restart_confirm"
+        ),
+      });
+    }
+
+    if (applicationCredentialsId) {
+      this._removeApplicationCredential(applicationCredentialsId);
+    }
+
+    this._handleFlowUpdated();
+  }
+
   static styles = css`
     a {
       text-decoration: none;
@@ -191,6 +324,9 @@ export class HaConfigFlowCard extends LitElement {
       --mdc-theme-primary: var(--error-color);
       --ha-card-border-color: var(--error-color);
     }
+    .warning {
+      --mdc-theme-text-primary-on-background: var(--error-color);
+    }
   `;
 }
 

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -295,7 +295,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
                 color:
                   route.route_status === "Active"
                     ? primaryColor
-                    : style.getPropertyValue("--disabled-color"),
+                    : style.getPropertyValue("--dark-primary-color"),
                 type: ["Child", "Parent"].includes(neighbor.relationship)
                   ? "solid"
                   : "dotted",
@@ -335,7 +335,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
             symbolSize: 5,
             lineStyle: {
               width: 1,
-              color: style.getPropertyValue("--disabled-color"),
+              color: style.getPropertyValue("--dark-primary-color"),
               type: "dotted",
             },
             ignoreForceLayout: true,

src/panels/config/labs/dialog-labs-preview-feature-enable.ts

@@ -204,7 +204,7 @@ export class DialogLabsPreviewFeatureEnable
       --md-list-item-trailing-space: var(--ha-space-6);
       margin: 0;
       padding: 0;
-      border-top: 1px solid var(--divider-color);
+      border-top: var(--ha-border-width-sm) solid var(--divider-color);
     }
 
     div[slot="actions"] > div {

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

@@ -16,6 +16,7 @@ import type { HomeAssistant } from "../../../types";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { brandsUrl } from "../../../util/brands-url";
 import { showToast } from "../../../util/toast";
+import { documentationUrl } from "../../../util/documentation-url";
 import { haStyle } from "../../../resources/styles";
 import { showLabsPreviewFeatureEnableDialog } from "./show-dialog-labs-preview-feature-enable";
 import {
@@ -100,7 +101,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
           ? html`
               <a
                 slot="toolbar-icon"
-                href="https://www.home-assistant.io/integrations/labs/"
+                href=${documentationUrl(this.hass, "/integrations/labs/")}
                 target="_blank"
                 rel="noopener noreferrer"
                 .title=${this.hass.localize("ui.common.help")}
@@ -124,7 +125,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
                     "ui.panel.config.labs.empty.description"
                   )}
                   <a
-                    href="https://www.home-assistant.io/integrations/labs/"
+                    href=${documentationUrl(this.hass, "/integrations/labs/")}
                     target="_blank"
                     rel="noopener noreferrer"
                   >
@@ -387,7 +388,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .content {
         max-width: 800px;
         margin: 0 auto;
-        padding: 16px;
+        padding: var(--ha-space-4);
         min-height: calc(100vh - 64px);
         display: flex;
         flex-direction: column;
@@ -398,7 +399,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       ha-card {
-        margin-bottom: 16px;
+        margin-bottom: var(--ha-space-4);
         position: relative;
         transition: box-shadow 0.3s ease;
       }
@@ -410,12 +411,12 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       @keyframes highlight-fade {
         0% {
           box-shadow:
-            0 0 0 2px var(--primary-color),
-            0 0 12px rgba(var(--rgb-primary-color), 0.4);
+            0 0 0 var(--ha-border-width-md) var(--primary-color),
+            0 0 var(--ha-shadow-blur-lg) rgba(var(--rgb-primary-color), 0.4);
         }
         100% {
           box-shadow:
-            0 0 0 2px transparent,
+            0 0 0 var(--ha-border-width-md) transparent,
             0 0 0 transparent;
         }
       }
@@ -424,7 +425,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .intro-card {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: var(--ha-space-4);
       }
 
       .intro-card h1 {
@@ -432,18 +433,18 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       .intro-text {
-        margin: 0 0 12px;
+        margin: 0 0 var(--ha-space-3);
       }
 
       /* Feature cards */
       .card-content {
-        padding: 16px;
+        padding: var(--ha-space-4);
       }
 
       .card-header {
         display: flex;
-        gap: 12px;
-        margin-bottom: 16px;
+        gap: var(--ha-space-3);
+        margin-bottom: var(--ha-space-4);
         align-items: flex-start;
       }
 
@@ -475,7 +476,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .empty {
         max-width: 500px;
         margin: 0 auto;
-        padding: 48px 16px;
+        padding: var(--ha-space-12) var(--ha-space-4);
         text-align: center;
       }
 
@@ -487,11 +488,11 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       .empty h1 {
-        margin: 24px 0 16px;
+        margin: var(--ha-space-6) 0 var(--ha-space-4);
       }
 
       .empty p {
-        margin: 0 0 24px;
+        margin: 0 0 var(--ha-space-6);
         font-size: 16px;
         line-height: 24px;
         color: var(--secondary-text-color);
@@ -500,7 +501,7 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       .empty a {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
+        gap: var(--ha-space-1);
         color: var(--primary-color);
         text-decoration: none;
         font-weight: 500;
@@ -511,9 +512,9 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
       }
 
       .empty a:focus-visible {
-        outline: 2px solid var(--primary-color);
+        outline: var(--ha-border-width-md) solid var(--primary-color);
         outline-offset: 2px;
-        border-radius: 4px;
+        border-radius: var(--ha-border-radius-sm);
       }
 
       .empty a ha-svg-icon {
@@ -528,15 +529,15 @@ class HaConfigLabs extends SubscribeMixin(LitElement) {
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
-        gap: 8px;
-        padding: 8px;
-        border-top: 1px solid var(--divider-color);
+        gap: var(--ha-space-2);
+        padding: var(--ha-space-2);
+        border-top: var(--ha-border-width-sm) solid var(--divider-color);
       }
 
       .card-actions > div {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px;
+        gap: var(--ha-space-2);
       }
     `,
   ];

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -62,7 +62,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       return nothing;
     }
     const defaultPanelUrlPath =
-      this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+      this.hass.systemData?.default_panel || DEFAULT_PANEL;
     const titleInvalid = !this._data.title || !this._data.title.trim();
 
     return html`
@@ -260,7 +260,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
       return;
     }
 
-    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+    const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
     // Add warning dialog to saying that this will change the default dashboard for all users
     const confirm = await showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -284,7 +284,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
 
     saveFrontendSystemData(this.hass.connection, "core", {
       ...this.hass.systemData,
-      defaultPanel: urlPath === defaultPanel ? undefined : urlPath,
+      default_panel: urlPath === defaultPanel ? undefined : urlPath,
     });
   }
 

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -404,7 +404,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
       return html` <hass-loading-screen></hass-loading-screen> `;
     }
 
-    const defaultPanel = this.hass.systemData?.defaultPanel || DEFAULT_PANEL;
+    const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
 
     return html`
       <hass-tabs-subpage-data-table

src/panels/config/scene/ha-scene-editor.ts

@@ -1265,6 +1265,10 @@ export class HaSceneEditor extends PreventUnsavedMixin(
           display: block;
           margin-bottom: 24px;
         }
+        ha-alert ha-button[slot="action"] {
+          width: max-content;
+          white-space: nowrap;
+        }
         ha-fab.dirty {
           bottom: 0;
         }

src/panels/config/tags/dialog-tag-detail.ts

@@ -2,6 +2,7 @@ import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { documentationUrl } from "../../../util/documentation-url";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
@@ -14,8 +15,6 @@ import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { TagDetailDialogParams } from "./show-dialog-tag-detail";
 
-const TAG_BASE = "https://www.home-assistant.io/tag/";
-
 @customElement("dialog-tag-detail")
 class DialogTagDetail
   extends LitElement
@@ -122,7 +121,7 @@ class DialogTagDetail
                 </div>
                 <div id="qr">
                   <ha-qr-code
-                    .data=${`${TAG_BASE}${this._params!.entry!.id}`}
+                    .data=${`${documentationUrl(this.hass, "/tag/")}${this._params!.entry!.id}`}
                     center-image="/static/icons/favicon-192x192.png"
                     error-correction-level="quartile"
                     scale="5"

src/panels/home/dialogs/dialog-edit-home.ts

@@ -0,0 +1,151 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/entity/ha-entities-picker";
+import "../../../components/ha-button";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-wa-dialog";
+import type { HomeFrontendSystemData } from "../../../data/frontend";
+import type { HassDialog } from "../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import type { EditHomeDialogParams } from "./show-dialog-edit-home";
+
+@customElement("dialog-edit-home")
+export class DialogEditHome
+  extends LitElement
+  implements HassDialog<EditHomeDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: EditHomeDialogParams;
+
+  @state() private _config?: HomeFrontendSystemData;
+
+  @state() private _open = false;
+
+  @state() private _submitting = false;
+
+  public showDialog(params: EditHomeDialogParams): void {
+    this._params = params;
+    this._config = { ...params.config };
+    this._open = true;
+  }
+
+  public closeDialog(): boolean {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    this._config = undefined;
+    this._submitting = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .headerTitle=${this.hass.localize("ui.panel.home.editor.title")}
+        @closed=${this._dialogClosed}
+      >
+        <p class="description">
+          ${this.hass.localize("ui.panel.home.editor.description")}
+        </p>
+
+        <ha-entities-picker
+          autofocus
+          .hass=${this.hass}
+          .value=${this._config?.favorite_entities || []}
+          .label=${this.hass.localize(
+            "ui.panel.lovelace.editor.strategy.home.favorite_entities"
+          )}
+          .placeholder=${this.hass.localize(
+            "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
+          )}
+          .helper=${this.hass.localize(
+            "ui.panel.home.editor.favorite_entities_helper"
+          )}
+          reorder
+          allow-custom-entity
+          @value-changed=${this._favoriteEntitiesChanged}
+        ></ha-entities-picker>
+
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            slot="secondaryAction"
+            @click=${this.closeDialog}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._save}
+            .disabled=${this._submitting}
+          >
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
+  }
+
+  private _favoriteEntitiesChanged(ev: CustomEvent): void {
+    const entities = ev.detail.value as string[];
+    this._config = {
+      ...this._config,
+      favorite_entities: entities.length > 0 ? entities : undefined,
+    };
+  }
+
+  private async _save(): Promise<void> {
+    if (!this._params || !this._config) {
+      return;
+    }
+
+    this._submitting = true;
+
+    try {
+      await this._params.saveConfig(this._config);
+      this.closeDialog();
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to save home configuration:", err);
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  static styles = [
+    haStyleDialog,
+    css`
+      ha-wa-dialog {
+        --dialog-content-padding: var(--ha-space-6);
+      }
+
+      .description {
+        margin: 0 0 var(--ha-space-4) 0;
+        color: var(--secondary-text-color);
+      }
+
+      ha-entities-picker {
+        display: block;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-edit-home": DialogEditHome;
+  }
+}

src/panels/home/dialogs/show-dialog-edit-home.ts

@@ -0,0 +1,20 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import type { HomeFrontendSystemData } from "../../../data/frontend";
+
+export interface EditHomeDialogParams {
+  config: HomeFrontendSystemData;
+  saveConfig: (config: HomeFrontendSystemData) => Promise<void>;
+}
+
+export const loadEditHomeDialog = () => import("./dialog-edit-home");
+
+export const showEditHomeDialog = (
+  element: HTMLElement,
+  params: EditHomeDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-edit-home",
+    dialogImport: loadEditHomeDialog,
+    dialogParams: params,
+  });
+};

src/panels/home/ha-panel-home.ts

@@ -3,18 +3,18 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
+import {
+  fetchFrontendSystemData,
+  saveFrontendSystemData,
+  type HomeFrontendSystemData,
+} from "../../data/frontend";
 import type { LovelaceDashboardStrategyConfig } from "../../data/lovelace/config/types";
 import type { HomeAssistant, PanelInfo, Route } from "../../types";
+import { showToast } from "../../util/toast";
 import "../lovelace/hui-root";
 import { generateLovelaceDashboardStrategy } from "../lovelace/strategies/get-strategy";
 import type { Lovelace } from "../lovelace/types";
-import { showAlertDialog } from "../lovelace/custom-card-helpers";
-
-const HOME_LOVELACE_CONFIG: LovelaceDashboardStrategyConfig = {
-  strategy: {
-    type: "home",
-  },
-};
+import { showEditHomeDialog } from "./dialogs/show-dialog-edit-home";
 
 @customElement("ha-panel-home")
 class PanelHome extends LitElement {
@@ -28,12 +28,14 @@ class PanelHome extends LitElement {
 
   @state() private _lovelace?: Lovelace;
 
+  @state() private _config: FrontendSystemData["home"] = {};
+
   public willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
     // Initial setup
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
-      this._setLovelace();
+      this._loadConfig();
       return;
     }
 
@@ -95,9 +97,28 @@ class PanelHome extends LitElement {
     `;
   }
 
+  private async _loadConfig() {
+    try {
+      const data = await fetchFrontendSystemData(this.hass.connection, "home");
+      this._config = data || {};
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to load favorites:", err);
+      this._config = {};
+    }
+    this._setLovelace();
+  }
+
   private async _setLovelace() {
+    const strategyConfig: LovelaceDashboardStrategyConfig = {
+      strategy: {
+        type: "home",
+        favorite_entities: this._config.favorite_entities,
+      },
+    };
+
     const config = await generateLovelaceDashboardStrategy(
-      HOME_LOVELACE_CONFIG,
+      strategyConfig,
       this.hass
     );
 
@@ -121,15 +142,34 @@ class PanelHome extends LitElement {
   }
 
   private _setEditMode = () => {
-    // For now, we just show an alert that edit mode is not supported.
-    // This will be expanded in the future.
-    showAlertDialog(this, {
-      title: "Edit mode not available",
-      text: "The Home panel does not support edit mode.",
-      confirmText: this.hass.localize("ui.common.ok"),
+    showEditHomeDialog(this, {
+      config: this._config,
+      saveConfig: async (config) => {
+        await this._saveConfig(config);
+      },
     });
   };
 
+  private async _saveConfig(config: HomeFrontendSystemData): Promise<void> {
+    try {
+      await saveFrontendSystemData(this.hass.connection, "home", config);
+      this._config = config || {};
+    } catch (err: any) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to save home configuration:", err);
+      showToast(this, {
+        message: this.hass.localize("ui.panel.home.editor.save_failed"),
+        duration: 0,
+        dismissable: true,
+      });
+      return;
+    }
+    showToast(this, {
+      message: this.hass.localize("ui.common.successfully_saved"),
+    });
+    this._setLovelace();
+  }
+
   static readonly styles: CSSResultGroup = css`
     :host {
       display: block;

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -80,10 +80,9 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       throw new Error("Entities need to be an array");
     }
 
-    const computedStyles = getComputedStyle(this);
     this._calendars = config!.entities.map((entity, idx) => ({
       entity_id: entity,
-      backgroundColor: getColorByIndex(idx, computedStyles),
+      backgroundColor: getColorByIndex(idx),
     }));
 
     if (this._config?.entities !== config.entities) {

src/panels/lovelace/cards/hui-map-card.ts

@@ -394,8 +394,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     if (color) {
       return color;
     }
-    const computedStyles = getComputedStyle(this);
-    color = getColorByIndex(this._colorIndex, computedStyles);
+    color = getColorByIndex(this._colorIndex);
     this._colorIndex++;
     this._colorDict[entityId] = color;
     return color;

src/panels/profile/ha-advanced-mode-row.ts

@@ -7,6 +7,7 @@ import "../../components/ha-settings-row";
 import "../../components/ha-switch";
 import type { CoreFrontendUserData } from "../../data/frontend";
 import { saveFrontendUserData } from "../../data/frontend";
+import { documentationUrl } from "../../util/documentation-url";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-advanced-mode-row")
@@ -31,7 +32,10 @@ class AdvancedModeRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.advanced_mode.description")}
           <a
-            href="https://www.home-assistant.io/blog/2019/07/17/release-96/#advanced-mode"
+            href=${documentationUrl(
+              this.hass,
+              "/blog/2019/07/17/release-96/#advanced-mode"
+            )}
             target="_blank"
             rel="noreferrer"
             >${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")}

src/panels/profile/ha-pick-dashboard-row.ts

@@ -25,7 +25,7 @@ class HaPickDashboardRow extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const value = this.hass.userData?.defaultPanel || USE_SYSTEM_VALUE;
+    const value = this.hass.userData?.default_panel || USE_SYSTEM_VALUE;
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading">
@@ -84,12 +84,12 @@ class HaPickDashboardRow extends LitElement {
       return;
     }
     const urlPath = value === USE_SYSTEM_VALUE ? undefined : value;
-    if (urlPath === this.hass.userData?.defaultPanel) {
+    if (urlPath === this.hass.userData?.default_panel) {
       return;
     }
     saveFrontendUserData(this.hass.connection, "core", {
       ...this.hass.userData,
-      defaultPanel: urlPath,
+      default_panel: urlPath,
     });
   }
 }

src/resources/markdown-worker.ts

@@ -15,7 +15,7 @@ const renderMarkdown = async (
     allowSvg?: boolean;
     allowDataUrl?: boolean;
   } = {}
-): Promise<string> => {
+): Promise<string[]> => {
   if (!whiteListNormal) {
     whiteListNormal = {
       ...getDefaultWhiteList(),
@@ -53,38 +53,43 @@ const renderMarkdown = async (
     whiteList.a.push("download");
   }
 
-  return filterXSS(await marked(content, markedOptions), {
-    whiteList,
-    onTagAttr: (
-      tag: string,
-      name: string,
-      value: string
-    ): string | undefined => {
-      // Override the default `onTagAttr` behavior to only render
-      // our markdown checkboxes.
-      // Returning undefined causes the default measure to be taken
-      // in the xss library.
-      if (tag === "input") {
-        if (
-          (name === "type" && value === "checkbox") ||
-          name === "checked" ||
-          name === "disabled"
-        ) {
-          return undefined;
+  marked.setOptions(markedOptions);
+
+  const tokens = marked.lexer(content);
+  return tokens.map((token) =>
+    filterXSS(marked.parser([token]), {
+      whiteList,
+      onTagAttr: (
+        tag: string,
+        name: string,
+        value: string
+      ): string | undefined => {
+        // Override the default `onTagAttr` behavior to only render
+        // our markdown checkboxes.
+        // Returning undefined causes the default measure to be taken
+        // in the xss library.
+        if (tag === "input") {
+          if (
+            (name === "type" && value === "checkbox") ||
+            name === "checked" ||
+            name === "disabled"
+          ) {
+            return undefined;
+          }
+          return "";
         }
-        return "";
-      }
-      if (
-        hassOptions.allowDataUrl &&
-        tag === "a" &&
-        name === "href" &&
-        value.startsWith("data:")
-      ) {
-        return `href="${value}"`;
-      }
-      return undefined;
-    },
-  });
+        if (
+          hassOptions.allowDataUrl &&
+          tag === "a" &&
+          name === "href" &&
+          value.startsWith("data:")
+        ) {
+          return `href="${value}"`;
+        }
+        return undefined;
+      },
+    })
+  );
 };
 
 const api = {

src/resources/theme/color/color.globals.ts

@@ -91,62 +91,6 @@ export const colorStyles = css`
     --black-color: #000000;
     --white-color: #ffffff;
 
-    /* colors - used for graphs, calendars, maps, etc */
-    --color-1: #4269d0;
-    --color-2: #f4bd4a;
-    --color-3: #ff725c;
-    --color-4: #6cc5b0;
-    --color-5: #a463f2;
-    --color-6: #ff8ab7;
-    --color-7: #9c6b4e;
-    --color-8: #97bbf5;
-    --color-9: #01ab63;
-    --color-10: #094bad;
-    --color-11: #c99000;
-    --color-12: #d84f3e;
-    --color-13: #49a28f;
-    --color-14: #048732;
-    --color-15: #d96895;
-    --color-16: #8043ce;
-    --color-17: #7599d1;
-    --color-18: #7a4c31;
-    --color-19: #6989f4;
-    --color-20: #ffd444;
-    --color-21: #ff957c;
-    --color-22: #8fe9d3;
-    --color-23: #62cc71;
-    --color-24: #ffadda;
-    --color-25: #c884ff;
-    --color-26: #badeff;
-    --color-27: #bf8b6d;
-    --color-28: #927acc;
-    --color-29: #97ee3f;
-    --color-30: #bf3947;
-    --color-31: #9f5b00;
-    --color-32: #f48758;
-    --color-33: #8caed6;
-    --color-34: #f2b94f;
-    --color-35: #eff26e;
-    --color-36: #e43872;
-    --color-37: #d9b100;
-    --color-38: #9d7a00;
-    --color-39: #698cff;
-    --color-40: #00d27e;
-    --color-41: #d06800;
-    --color-42: #009f82;
-    --color-43: #c49200;
-    --color-44: #cbe8ff;
-    --color-45: #fecddf;
-    --color-46: #c27eb6;
-    --color-47: #8cd2ce;
-    --color-48: #c4b8d9;
-    --color-49: #f883b0;
-    --color-50: #a49100;
-    --color-51: #f48800;
-    --color-52: #27d0df;
-    --color-53: #a04a9b;
-    --color-54: #4269d0;
-
     /* history colors */
     --history-unavailable-color: transparent;
 

src/translations/en.json

@@ -2220,6 +2220,14 @@
       "migrate_to_user_data": "This will change the sidebar on all the devices you are logged in to. To create a sidebar per device, you should use a different user for that device."
     },
     "panel": {
+      "home": {
+        "editor": {
+          "title": "Edit home page",
+          "description": "Configure your home page display preferences.",
+          "favorite_entities_helper": "Display your favorite entities. Home Assistant will still suggest based on commonly used up to 8 slots.",
+          "save_failed": "Failed to save home page configuration"
+        }
+      },
       "my": {
         "not_supported": "This redirect is not supported by your Home Assistant instance. Check the {link} for the supported redirects and the version they where introduced.",
         "component_not_loaded": "This redirect is not supported by your Home Assistant instance. You need the integration {integration} to use this redirect.",

test/common/color/colors.test.ts

@@ -2,63 +2,34 @@ import { describe, test, expect } from "vitest";
 import {
   getColorByIndex,
   getGraphColorByIndex,
-  COLORS_COUNT,
+  COLORS,
 } from "../../../src/common/color/colors";
 import { theme2hex } from "../../../src/common/color/convert-color";
 
 describe("getColorByIndex", () => {
-  test("return the correct color from CSS variable", () => {
-    const style = {
-      getPropertyValue: (prop) => {
-        if (prop === "--color-1") return "#4269d0";
-        if (prop === "--color-11") return "#c99000";
-        return "";
-      },
-    } as CSSStyleDeclaration;
-    expect(getColorByIndex(0, style)).toBe(theme2hex("#4269d0"));
-    expect(getColorByIndex(10, style)).toBe(theme2hex("#c99000"));
+  test("return the correct color for a given index", () => {
+    expect(getColorByIndex(0)).toBe(COLORS[0]);
+    expect(getColorByIndex(10)).toBe(COLORS[10]);
   });
 
-  test("wrap around if the index is greater than the total count", () => {
-    const style = {
-      getPropertyValue: (prop) => {
-        if (prop === "--color-1") return "#4269d0";
-        if (prop === "--color-5") return "#a463f2";
-        return "";
-      },
-    } as CSSStyleDeclaration;
-    // Index 54 should wrap to color 1
-    expect(getColorByIndex(COLORS_COUNT, style)).toBe(theme2hex("#4269d0"));
-    // Index 58 should wrap to color 5
-    expect(getColorByIndex(COLORS_COUNT + 4, style)).toBe(theme2hex("#a463f2"));
+  test("wrap around if the index is greater than the length of COLORS", () => {
+    expect(getColorByIndex(COLORS.length)).toBe(COLORS[0]);
+    expect(getColorByIndex(COLORS.length + 4)).toBe(COLORS[4]);
   });
 });
 
 describe("getGraphColorByIndex", () => {
-  test("return color from --graph-color variable when it exists", () => {
+  test("return the correct theme color if it exists", () => {
     const style = {
       getPropertyValue: (prop) => (prop === "--graph-color-1" ? "#123456" : ""),
     } as CSSStyleDeclaration;
     expect(getGraphColorByIndex(0, style)).toBe(theme2hex("#123456"));
   });
 
-  test("fallback to --color variable when --graph-color does not exist", () => {
+  test("return the default color if the theme color does not exist", () => {
     const style = {
-      getPropertyValue: (prop) => (prop === "--color-5" ? "#abcdef" : ""),
-    } as CSSStyleDeclaration;
-    // Index 4 should try --graph-color-5, then fallback to --color-5
-    expect(getGraphColorByIndex(4, style)).toBe(theme2hex("#abcdef"));
-  });
-
-  test("prefer --graph-color over --color when both exist", () => {
-    const style = {
-      getPropertyValue: (prop) => {
-        if (prop === "--graph-color-1") return "#111111";
-        if (prop === "--color-1") return "#222222";
-        return "";
-      },
-    } as CSSStyleDeclaration;
-    // Should prefer --graph-color-1
-    expect(getGraphColorByIndex(0, style)).toBe(theme2hex("#111111"));
+      getPropertyValue: () => "",
+    } as unknown as CSSStyleDeclaration;
+    expect(getGraphColorByIndex(0, style)).toBe(theme2hex(COLORS[0]));
   });
 });