Fix tree view heading overlapping Show more button (#28872) (#28968)

src/data/theme.ts

@@ -1,18 +0,0 @@
-import type { HomeAssistant, ThemeSettings } from "../types";
-import { saveFrontendUserData, subscribeFrontendUserData } from "./frontend";
-
-declare global {
-  interface FrontendUserData {
-    theme: ThemeSettings;
-  }
-}
-
-export const subscribeThemePreferences = (
-  hass: HomeAssistant,
-  callback: (data: { value: ThemeSettings | null }) => void
-) => subscribeFrontendUserData(hass.connection, "theme", callback);
-
-export const saveThemePreferences = (
-  hass: HomeAssistant,
-  data: ThemeSettings
-) => saveFrontendUserData(hass.connection, "theme", data);

src/panels/config/automation/add-automation-element/ha-automation-add-from-target.ts

@@ -1504,14 +1504,7 @@ export default class HaAutomationAddFromTarget extends LitElement {
       box-shadow: inset var(--ha-shadow-offset-x-lg)
         calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
         var(--ha-shadow-spread-lg) var(--ha-color-shadow-light);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .targets-show-more {
-        box-shadow: inset var(--ha-shadow-offset-x-lg)
-          calc(var(--ha-shadow-offset-y-lg) * -1) var(--ha-shadow-blur-lg)
-          var(--ha-shadow-spread-lg) var(--ha-color-shadow-dark);
-      }
+      z-index: 2;
     }
 
     @media all and (max-width: 870px), all and (max-height: 500px) {

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

@@ -15,13 +15,8 @@ import {
   DefaultAccentColor,
   DefaultPrimaryColor,
 } from "../../resources/theme/color/color.globals";
-import {
-  saveThemePreferences,
-  subscribeThemePreferences,
-} from "../../data/theme";
-import type { HomeAssistant, ThemeSettings } from "../../types";
+import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
-import { clearSelectedThemeState, getState } from "../../util/ha-pref-storage";
 
 const USE_DEFAULT_THEME = "__USE_DEFAULT_THEME__";
 const HOME_ASSISTANT_THEME = "default";
@@ -34,39 +29,6 @@ export class HaPickThemeRow extends LitElement {
 
   @state() _themeNames: string[] = [];
 
-  @state() private _backendTheme?: ThemeSettings | null;
-
-  @state() private _migrating = false;
-
-  private _unsubThemePreferences?: ReturnType<typeof subscribeThemePreferences>;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._subscribeThemePreferences();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._unsubThemePreferences) {
-      this._unsubThemePreferences.then((unsub) => unsub());
-      this._unsubThemePreferences = undefined;
-    }
-  }
-
-  private _subscribeThemePreferences() {
-    if (this._unsubThemePreferences || !this.hass) {
-      return;
-    }
-    const unsubscribe = subscribeThemePreferences(this.hass, ({ value }) => {
-      this._backendTheme = value;
-    });
-    this._unsubThemePreferences = unsubscribe;
-    unsubscribe.catch(() => {
-      this._backendTheme = undefined;
-      this._unsubThemePreferences = undefined;
-    });
-  }
-
   protected render(): TemplateResult {
     const hasThemes =
       this.hass.themes.themes && Object.keys(this.hass.themes.themes).length;
@@ -79,11 +41,6 @@ export class HaPickThemeRow extends LitElement {
         : this.hass.themes.default_theme;
 
     const themeSettings = this.hass.selectedTheme;
-    const localTheme = this._getLocalTheme();
-    const showMigration =
-      this._backendTheme !== undefined &&
-      this._backendTheme === null &&
-      localTheme !== null;
 
     return html`
       <ha-settings-row .narrow=${this.narrow}>
@@ -202,35 +159,10 @@ export class HaPickThemeRow extends LitElement {
               : ""}
           </div>`
         : ""}
-      ${showMigration
-        ? html`
-            <ha-settings-row .narrow=${this.narrow}>
-              <span slot="heading">
-                ${this.hass.localize("ui.panel.profile.themes.migrate_header")}
-              </span>
-              <span slot="description">
-                ${this.hass.localize(
-                  "ui.panel.profile.themes.migrate_description"
-                )}
-              </span>
-              <ha-button
-                appearance="plain"
-                size="small"
-                .disabled=${this._migrating}
-                @click=${this._migrateThemePreferences}
-              >
-                ${this.hass.localize("ui.panel.profile.themes.migrate_button")}
-              </ha-button>
-            </ha-settings-row>
-          `
-        : ""}
     `;
   }
 
   public willUpdate(changedProperties: PropertyValues) {
-    if (changedProperties.has("hass")) {
-      this._subscribeThemePreferences();
-    }
     const oldHass = changedProperties.get("hass") as undefined | HomeAssistant;
     const themesChanged =
       changedProperties.has("hass") &&
@@ -304,31 +236,6 @@ export class HaPickThemeRow extends LitElement {
     });
   }
 
-  private _getLocalTheme(): ThemeSettings | null {
-    return getState().selectedTheme ?? null;
-  }
-
-  private async _migrateThemePreferences() {
-    const localTheme = this._getLocalTheme();
-    if (!localTheme) {
-      return;
-    }
-    this._migrating = true;
-    try {
-      await saveThemePreferences(this.hass, localTheme);
-      clearSelectedThemeState();
-      fireEvent(this, "hass-notification", {
-        message: this.hass.localize("ui.panel.profile.themes.migrate_success"),
-      });
-    } catch (_err: any) {
-      fireEvent(this, "hass-notification", {
-        message: this.hass.localize("ui.panel.profile.themes.migrate_failed"),
-      });
-    } finally {
-      this._migrating = false;
-    }
-  }
-
   static styles = css`
     a {
       color: var(--primary-color);

src/panels/profile/ha-profile-section-general.ts

@@ -154,10 +154,6 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-row>
-            <ha-pick-theme-row
-              .narrow=${this.narrow}
-              .hass=${this.hass}
-            ></ha-pick-theme-row>
             <ha-pick-dashboard-row
               .narrow=${this.narrow}
               .hass=${this.hass}
@@ -212,6 +208,10 @@ class HaProfileSectionGeneral extends LitElement {
             <div class="card-content">
               ${this.hass.localize("ui.panel.profile.client_settings_detail")}
             </div>
+            <ha-pick-theme-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-theme-row>
             ${this.hass.dockedSidebar !== "auto" || !this.narrow
               ? html`
                   <ha-force-narrow-row

src/state/themes-mixin.ts

@@ -3,7 +3,6 @@ import {
   invalidateThemeCache,
 } from "../common/dom/apply_themes_on_element";
 import type { HASSDomEvent } from "../common/dom/fire_event";
-import { subscribeThemePreferences, saveThemePreferences } from "../data/theme";
 import { subscribeThemes } from "../data/ws-themes";
 import type { Constructor, HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
@@ -25,8 +24,6 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
   class extends superClass {
     private _themeApplied = false;
 
-    private _themePrefsAvailable = false;
-
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       this.addEventListener("settheme", (ev) => {
@@ -37,15 +34,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           },
         });
         this._applyTheme(mql.matches);
-        if (this._themePrefsAvailable) {
-          saveThemePreferences(this.hass!, this.hass!.selectedTheme!).catch(
-            () => {
-              storeState(this.hass!);
-            }
-          );
-        } else {
-          storeState(this.hass!);
-        }
+        storeState(this.hass!);
       });
       mql.addListener((ev) => this._applyTheme(ev.matches));
       if (!this._themeApplied && mql.matches) {
@@ -74,17 +63,6 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         invalidateThemeCache();
         this._applyTheme(mql.matches);
       });
-
-      subscribeThemePreferences(this.hass!, ({ value }) => {
-        this._themePrefsAvailable = true;
-        if (!value) {
-          return;
-        }
-        this._updateHass({ selectedTheme: value });
-        this._applyTheme(mql.matches);
-      }).catch(() => {
-        this._themePrefsAvailable = false;
-      });
     }
 
     private _applyTheme(darkPreferred: boolean) {

src/translations/en.json

@@ -8946,11 +8946,6 @@
           "error_no_theme": "No themes available.",
           "link_promo": "Learn about themes",
           "dropdown_label": "Theme",
-          "migrate_header": "Migrate theme settings",
-          "migrate_description": "Save your theme selection to your Home Assistant user profile.",
-          "migrate_button": "Migrate",
-          "migrate_success": "Theme settings migrated.",
-          "migrate_failed": "Failed to migrate theme settings.",
           "dark_mode": {
             "auto": "Auto",
             "light": "Light",

src/util/ha-pref-storage.ts

@@ -56,11 +56,3 @@ export function getState(): Partial<StoredHomeAssistant> {
 export function clearState() {
   window.localStorage.clear();
 }
-
-export function clearSelectedThemeState() {
-  try {
-    window.localStorage.removeItem("selectedTheme");
-  } catch (_err: any) {
-    // Ignore storage errors (private mode, full storage).
-  }
-}