Change storage key

src/components/ha-snowflakes.ts

@@ -0,0 +1,167 @@
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { storage } from "../common/decorators/storage";
+import type { HomeAssistant } from "../types";
+
+interface Snowflake {
+  id: number;
+  left: number;
+  size: number;
+  duration: number;
+  delay: number;
+  blur: number;
+}
+
+@customElement("ha-snowflakes")
+export class HaSnowflakes extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @storage({ key: "winter-mode", state: true, subscribe: true })
+  @state()
+  private _enabled = true;
+
+  @state() private _snowflakes: Snowflake[] = [];
+
+  private _maxSnowflakes = 50;
+
+  private _generateSnowflakes() {
+    if (!this._enabled) {
+      this._snowflakes = [];
+      return;
+    }
+
+    const snowflakes: Snowflake[] = [];
+    for (let i = 0; i < this._maxSnowflakes; i++) {
+      snowflakes.push({
+        id: i,
+        left: Math.random() * 100, // Random position from 0-100%
+        size: Math.random() * 12 + 8, // Random size between 8-20px
+        duration: Math.random() * 8 + 8, // Random duration between 8-16s
+        delay: Math.random() * 8, // Random delay between 0-8s
+        blur: Math.random() * 1, // Random blur between 0-1px
+      });
+    }
+    this._snowflakes = snowflakes;
+  }
+
+  protected willUpdate(changedProps: Map<string, unknown>) {
+    super.willUpdate(changedProps);
+    if (changedProps.has("_enabled")) {
+      this._generateSnowflakes();
+    }
+  }
+
+  protected render() {
+    if (!this._enabled) {
+      return nothing;
+    }
+
+    const isDark = this.hass?.themes.darkMode ?? false;
+
+    return html`
+      <div class="snowflakes ${isDark ? "dark" : "light"}" aria-hidden="true">
+        ${this._snowflakes.map(
+          (flake) => html`
+            <div
+              class="snowflake ${this.narrow && flake.id >= 30
+                ? "hide-narrow"
+                : ""}"
+              style="
+                left: ${flake.left}%;
+                font-size: ${flake.size}px;
+                animation-duration: ${flake.duration}s;
+                animation-delay: ${flake.delay}s;
+                filter: blur(${flake.blur}px);
+              "
+            >
+              ❄
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  static readonly styles = css`
+    :host {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      z-index: 9999;
+      overflow: hidden;
+    }
+
+    .snowflakes {
+      position: absolute;
+      top: -10%;
+      left: 0;
+      width: 100%;
+      height: 110%;
+      pointer-events: none;
+    }
+
+    .snowflake {
+      position: absolute;
+      top: -10%;
+      opacity: 0.7;
+      user-select: none;
+      pointer-events: none;
+      animation: fall linear infinite;
+    }
+
+    .light .snowflake {
+      color: #00bcd4;
+      text-shadow:
+        0 0 5px #00bcd4,
+        0 0 10px #00e5ff;
+    }
+
+    .dark .snowflake {
+      color: #fff;
+      text-shadow:
+        0 0 5px rgba(255, 255, 255, 0.8),
+        0 0 10px rgba(255, 255, 255, 0.5);
+    }
+
+    .snowflake.hide-narrow {
+      display: none;
+    }
+
+    @keyframes fall {
+      0% {
+        transform: translateY(-10vh) translateX(0);
+      }
+      25% {
+        transform: translateY(30vh) translateX(10px);
+      }
+      50% {
+        transform: translateY(60vh) translateX(-10px);
+      }
+      75% {
+        transform: translateY(85vh) translateX(10px);
+      }
+      100% {
+        transform: translateY(120vh) translateX(0);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .snowflake {
+        animation: none;
+        display: none;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-snowflakes": HaSnowflakes;
+  }
+}

src/layouts/home-assistant-main.ts

@@ -7,6 +7,7 @@ import { listenMediaQuery } from "../common/dom/media_query";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import "../components/ha-drawer";
+import "../components/ha-snowflakes";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
@@ -50,6 +51,7 @@ export class HomeAssistantMain extends LitElement {
       this.hass.panels && this.hass.userData && this.hass.systemData;
 
     return html`
+      <ha-snowflakes .hass=${this.hass} .narrow=${this.narrow}></ha-snowflakes>
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
         .open=${sidebarNarrow ? this._drawerOpen : false}

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

@@ -1,3 +1,4 @@
+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";
@@ -5,6 +6,7 @@ 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";
@@ -31,9 +33,6 @@ 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 {
@@ -74,25 +73,24 @@ class HaConfigSectionUpdates extends LitElement {
             .path=${mdiRefresh}
             @click=${this._checkUpdates}
           ></ha-icon-button>
-          <ha-dropdown @wa-select=${this._handleOverflowAction}>
+          <ha-button-menu multi>
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-
-            <ha-dropdown-item
-              type="checkbox"
-              value="show_skipped"
-              .checked=${this._showSkipped}
+            <ha-check-list-item
+              left
+              @request-selected=${this._toggleSkipped}
+              .selected=${this._showSkipped}
             >
               ${this.hass.localize("ui.panel.config.updates.show_skipped")}
-            </ha-dropdown-item>
+            </ha-check-list-item>
             ${this._supervisorInfo
               ? html`
-                  <wa-divider></wa-divider>
-                  <ha-dropdown-item
-                    value="toggle_beta"
+                  <li divider role="separator"></li>
+                  <ha-list-item
+                    @request-selected=${this._toggleBeta}
                     .disabled=${this._supervisorInfo.channel === "dev"}
                   >
                     ${this._supervisorInfo.channel === "stable"
@@ -100,10 +98,10 @@ class HaConfigSectionUpdates extends LitElement {
                       : this.hass.localize(
                           "ui.panel.config.updates.leave_beta"
                         )}
-                  </ha-dropdown-item>
+                  </ha-list-item>
                 `
               : ""}
-          </ha-dropdown>
+          </ha-button-menu>
         </div>
         <div class="content">
           <ha-card outlined>
@@ -135,19 +133,27 @@ class HaConfigSectionUpdates extends LitElement {
     this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
   }
 
-  private async _handleOverflowAction(
-    ev: CustomEvent<{ item: { value: string } }>
+  private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (ev.detail.source !== "property") {
+      return;
+    }
+
+    this._showSkipped = !this._showSkipped;
+  }
+
+  private async _toggleBeta(
+    ev: CustomEvent<RequestSelectedDetail>
   ): Promise<void> {
-    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;
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+
+    if (this._supervisorInfo!.channel === "stable") {
+      showJoinBetaDialog(this, {
+        join: async () => this._setChannel("beta"),
+      });
+    } else {
+      this._setChannel("stable");
     }
   }
 

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("--dark-primary-color"),
+                    : style.getPropertyValue("--disabled-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("--dark-primary-color"),
+              color: style.getPropertyValue("--disabled-color"),
               type: "dotted",
             },
             ignoreForceLayout: true,

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

@@ -31,6 +31,7 @@ import "./ha-pick-time-zone-row";
 import "./ha-push-notifications-row";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
+import "./ha-set-winter-mode-row";
 
 @customElement("ha-profile-section-general")
 class HaProfileSectionGeneral extends LitElement {
@@ -240,6 +241,10 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-set-suspend-row>
+            <ha-set-winter-mode-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-set-winter-mode-row>
             ${!isMobileClient
               ? html`
                   <ha-enable-shortcuts-row

src/panels/profile/ha-set-winter-mode-row.ts

@@ -0,0 +1,50 @@
+import type { TemplateResult } from "lit";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { storage } from "../../common/decorators/storage";
+import "../../components/ha-settings-row";
+import "../../components/ha-switch";
+import type { HaSwitch } from "../../components/ha-switch";
+import type { HomeAssistant } from "../../types";
+
+@customElement("ha-set-winter-mode-row")
+class HaSetWinterModeRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @storage({ key: "winter-mode", state: true, subscribe: true })
+  @state()
+  private _winterMode = true;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.winter_mode.header")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.winter_mode.description")}
+        </span>
+        <ha-switch
+          .checked=${this._winterMode}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private _checkedChanged(ev: Event) {
+    const winterMode = (ev.target as HaSwitch).checked;
+    if (winterMode === this._winterMode) {
+      return;
+    }
+    this._winterMode = winterMode;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-set-winter-mode-row": HaSetWinterModeRow;
+  }
+}

src/translations/en.json

@@ -8618,6 +8618,10 @@
           "header": "Vibrate",
           "description": "Enable or disable vibration on this device when controlling devices."
         },
+        "winter_mode": {
+          "header": "Winter mode",
+          "description": "Add a seasonal touch to your Home Assistant interface."
+        },
         "enable_shortcuts": {
           "header": "Keyboard shortcuts",
           "description": "Enable or disable keyboard shortcuts for performing various actions in the UI."