Add profile settings for device sidebar

src/components/ha-sidebar.ts

@@ -52,6 +52,7 @@ import { preventDefault } from "../common/dom/prevent_default";
 import {
   saveSidebarPreferences,
   subscribeSidebarPreferences,
+  type SidebarPreferences,
 } from "../data/sidebar";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
@@ -231,19 +232,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   @state()
   private _userHiddenPanels: string[] = [];
 
-  @state()
-  private _tempPanelOrder?: string[];
-
-  @state()
-  private _tempHiddenPanels?: string[];
-
   public hassSubscribe(): UnsubscribeFunc[] {
     const subscribeFunctions = [
       subscribeSidebarPreferences(this.hass, (sidebar) => {
-        if (!this._devicePanelOrder && !this._deviceHiddenPanels && sidebar) {
+        this._userPanelOrder = sidebar?.panelOrder || [];
-          this._userPanelOrder = sidebar.panelOrder || [];
+        this._userHiddenPanels = sidebar?.hiddenPanels || [];
-          this._userHiddenPanels = sidebar.hiddenPanels || [];
-        }
       }),
     ];
     if (this.hass.user?.is_admin) {
@@ -289,9 +282,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       changedProps.has("_devicePanelOrder") ||
       changedProps.has("_deviceHiddenPanels") ||
       changedProps.has("_userPanelOrder") ||
-      changedProps.has("_userHiddenPanels") ||
+      changedProps.has("_userHiddenPanels")
-      changedProps.has("_tempPanelOrder") ||
-      changedProps.has("_tempHiddenPanels")
     ) {
       return true;
     }
@@ -411,13 +402,35 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     </div>`;
   }
 
+  private _getPanelPreferencesMemoized = memoizeOne((userPreferences: SidebarPreferences, devicePreferences: SidebarPreferences): { panelOrder: string[], hiddenPanels: string[] } => {
+    let panelOrder = userPreferences.panelOrder ?? [];
+    let hiddenPanels = userPreferences.hiddenPanels ?? [];
+
+    if (devicePreferences.panelOrder || devicePreferences.hiddenPanels) {
+      panelOrder = devicePreferences.panelOrder ?? [];
+      hiddenPanels = devicePreferences.hiddenPanels ?? [];
+    }
+
+    return { panelOrder, hiddenPanels }
+  })
+
+  private _getPanelPreferences() {
+    return this._getPanelPreferencesMemoized(
+      {
+        panelOrder: this._userPanelOrder,
+        hiddenPanels: this._userHiddenPanels
+      },
+      {
+        panelOrder: this._devicePanelOrder,
+        hiddenPanels: this._deviceHiddenPanels
+      }
+    )
+  }
+
   private _renderAllPanels() {
-    const panelOrder =
+    // TODO render skeleton loading if panels are not loaded yet
-      this._tempPanelOrder || this._devicePanelOrder || this._userPanelOrder;
+
-    const hiddenPanels =
+    const { panelOrder, hiddenPanels } = this._getPanelPreferences(); 
-      this._tempHiddenPanels ||
-      this._deviceHiddenPanels ||
-      this._userHiddenPanels;
 
     const [beforeSpacer, afterSpacer] = computePanels(
       this.hass.panels,
@@ -511,23 +524,49 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         `;
   }
 
+  private async _setPanelOrder(panelOrder: string[]) {
+    if (this._devicePanelOrder || this._deviceHiddenPanels) {
+      this._devicePanelOrder = [...panelOrder];
+    } else {
+      this._userPanelOrder = [...panelOrder];
+      await saveSidebarPreferences(this.hass, {
+        panelOrder: panelOrder,
+        hiddenPanels: this._userHiddenPanels,
+      });
+    }
+  }
+
+  private async _setHiddenPanels(hiddenPanels: string[]) {
+    if (this._devicePanelOrder || this._deviceHiddenPanels) {
+      this._deviceHiddenPanels = hiddenPanels;
+    } else {
+      this._userHiddenPanels = hiddenPanels;
+      await saveSidebarPreferences(this.hass, {
+        panelOrder: this._userPanelOrder,
+        hiddenPanels: hiddenPanels,
+      });
+    }
+  }
+
   private _panelMoved(ev: CustomEvent) {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
 
+    const { panelOrder, hiddenPanels } = this._getPanelPreferences();
+
     const [beforeSpacer] = computePanels(
       this.hass.panels,
       this.hass.defaultPanel,
-      this._tempPanelOrder!,
+      panelOrder,
-      this._tempHiddenPanels!,
+      hiddenPanels!,
       this.hass.locale
     );
 
-    const panelOrder = beforeSpacer.map((panel) => panel.url_path);
+    const panelOrderNew = beforeSpacer.map((panel) => panel.url_path);
-    const panel = panelOrder.splice(oldIndex, 1)[0];
+    const panel = panelOrderNew.splice(oldIndex, 1)[0];
-    panelOrder.splice(newIndex, 0, panel);
+    panelOrderNew.splice(newIndex, 0, panel);
 
-    this._tempPanelOrder = panelOrder;
+    this._setPanelOrder(panelOrderNew);
   }
 
   private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
@@ -544,10 +583,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   }
 
   private _renderHiddenPanels() {
-    const hiddenPanels =
+    const { hiddenPanels } = this._getPanelPreferences();
-      this._tempHiddenPanels ||
-      this._deviceHiddenPanels ||
-      this._userHiddenPanels;
 
     return html`${hiddenPanels.length
       ? html`${hiddenPanels.map((url) => {
@@ -751,13 +787,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private async _editModeActivated() {
     await this._loadEditStyle();
-
-    this._tempPanelOrder = [
-      ...(this._devicePanelOrder || this._userPanelOrder),
-    ];
-    this._tempHiddenPanels = [
-      ...(this._deviceHiddenPanels || this._userHiddenPanels),
-    ];
   }
 
   private async _loadEditStyle() {
@@ -773,21 +802,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   }
 
   private _closeEditMode() {
-    // TODO confirm dialog if changes and radio if device or user
-    if (this._devicePanelOrder || this._deviceHiddenPanels) {
-      this._devicePanelOrder = this._tempPanelOrder;
-      this._deviceHiddenPanels = this._tempHiddenPanels;
-    } else {
-      this._userPanelOrder = this._tempPanelOrder!;
-      this._userHiddenPanels = this._tempHiddenPanels!;
-      saveSidebarPreferences(this.hass, {
-        panelOrder: this._userPanelOrder,
-        hiddenPanels: this._userHiddenPanels,
-      });
-    }
-    this._tempPanelOrder = undefined;
-    this._tempHiddenPanels = undefined;
-
     fireEvent(this, "hass-edit-sidebar", { editMode: false });
   }
 
@@ -797,20 +811,24 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     if ((this._deviceHiddenPanels || this._userHiddenPanels).includes(panel)) {
       return;
     }
+
+    const { panelOrder, hiddenPanels } = this._getPanelPreferences();
+    
     // Make a copy for Memoize
-    this._tempHiddenPanels = [...this._tempHiddenPanels!, panel];
+    this._setHiddenPanels([...hiddenPanels, panel]);
     // Remove it from the panel order
-    this._tempPanelOrder = this._tempPanelOrder!.filter(
+    this._setPanelOrder(panelOrder.filter(
       (order) => order !== panel
-    );
+    ));
   }
 
   private async _unhidePanel(ev: Event) {
     ev.preventDefault();
     const panel = (ev.currentTarget as any).panel;
-    this._tempHiddenPanels = this._tempHiddenPanels!.filter(
+
-      (hidden) => hidden !== panel
+    const { hiddenPanels } = this._getPanelPreferences();
-    );
+
+    this._setHiddenPanels(hiddenPanels.filter((hidden) => hidden !== panel));
   }
 
   private _itemMouseEnter(ev: MouseEvent) {

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

@@ -1,10 +1,11 @@
-import "@material/mwc-button";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
+import "../../components/ha-button";
+import "../../components/ha-expansion-panel";
 import "../../layouts/hass-tabs-subpage";
 import { profileSections } from "./ha-panel-profile";
 import { isExternal } from "../../data/external";
@@ -27,6 +28,9 @@ import "./ha-pick-time-zone-row";
 import "./ha-push-notifications-row";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
+import { storage } from "../../common/decorators/storage";
+import type { HaSwitch } from "../../components/ha-switch";
+import { fetchSidebarPreferences } from "../../data/sidebar";
 
 @customElement("ha-profile-section-general")
 class HaProfileSectionGeneral extends LitElement {
@@ -38,6 +42,20 @@ class HaProfileSectionGeneral extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  @storage({
+    key: "sidebarPanelOrder",
+    state: true,
+    subscribe: true,
+  })
+  private _devicePanelOrder?: string[];
+
+  @storage({
+    key: "sidebarHiddenPanels",
+    state: true,
+    subscribe: true,
+  })
+  private _deviceHiddenPanels?: string[];
+
   private _unsubCoreData?: UnsubscribeFunc;
 
   private _getCoreData() {
@@ -71,6 +89,9 @@ class HaProfileSectionGeneral extends LitElement {
   }
 
   protected render(): TemplateResult {
+    const deviceSidebarSettingsEnabled =
+      !!this._devicePanelOrder || !!this._deviceHiddenPanels;
+
     return html`
       <hass-tabs-subpage
         main-page
@@ -91,9 +112,9 @@ class HaProfileSectionGeneral extends LitElement {
                 : ""}
             </div>
             <div class="card-actions">
-              <mwc-button class="warning" @click=${this._handleLogOut}>
+              <ha-button class="warning" @click=${this._handleLogOut}>
                 ${this.hass.localize("ui.panel.profile.logout")}
-              </mwc-button>
+              </ha-button>
             </div>
           </ha-card>
           <ha-card
@@ -128,6 +149,29 @@ class HaProfileSectionGeneral extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-first-weekday-row>
+            <ha-settings-row .narrow=${this.narrow}>
+              <span slot="heading">
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.header"
+                )}
+              </span>
+              <span
+                slot="description"
+                class=${deviceSidebarSettingsEnabled ? "device-info" : ""}
+              >
+                ${this.hass.localize(
+                  `ui.panel.profile.customize_sidebar.${!deviceSidebarSettingsEnabled ? "description" : "overwritten_by_device"}`
+                )}
+              </span>
+              <ha-button
+                .disabled=${deviceSidebarSettingsEnabled}
+                @click=${this._customizeSidebar}
+              >
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.button"
+                )}
+              </ha-button>
+            </ha-settings-row>
             ${this.hass.user!.is_admin
               ? html`
                   <ha-advanced-mode-row
@@ -159,20 +203,48 @@ class HaProfileSectionGeneral extends LitElement {
             <ha-settings-row .narrow=${this.narrow}>
               <span slot="heading">
                 ${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.header"
+                  "ui.panel.profile.customize_sidebar.device_specific_header"
                 )}
               </span>
               <span slot="description">
                 ${this.hass.localize(
-                  "ui.panel.profile.customize_sidebar.description"
+                  "ui.panel.profile.customize_sidebar.device_description"
                 )}
               </span>
-              <mwc-button @click=${this._customizeSidebar}>
+              <ha-switch
-                ${this.hass.localize(
+                .checked=${deviceSidebarSettingsEnabled}
-                  "ui.panel.profile.customize_sidebar.button"
+                @change=${this._toggleDeviceSidebarPreferences}
-                )}
+              ></ha-switch>
-              </mwc-button>
             </ha-settings-row>
+            ${deviceSidebarSettingsEnabled
+              ? html`
+                  <ha-expansion-panel
+                    outlined
+                    .header=${this.hass.localize(
+                      "ui.panel.profile.customize_sidebar.device_specific_header"
+                    )}
+                    expanded
+                  >
+                    <ha-settings-row .narrow=${this.narrow}>
+                      <span slot="heading">
+                        ${this.hass.localize(
+                          "ui.panel.profile.customize_sidebar.header"
+                        )}
+                      </span>
+                      <span slot="description">
+                        ${this.hass.localize(
+                          "ui.panel.profile.customize_sidebar.description"
+                        )}
+                      </span>
+                      <ha-button @click=${this._customizeSidebar}>
+                        ${this.hass.localize(
+                          "ui.panel.profile.customize_sidebar.button"
+                        )}
+                      </ha-button>
+                    </ha-settings-row>
+                  </ha-expansion-panel>
+                `
+              : nothing}
             ${this.hass.dockedSidebar !== "auto" || !this.narrow
               ? html`
                   <ha-force-narrow-row
@@ -215,6 +287,38 @@ class HaProfileSectionGeneral extends LitElement {
     fireEvent(this, "hass-edit-sidebar", { editMode: true });
   }
 
+  private async _toggleDeviceSidebarPreferences(ev: Event) {
+    const switchElement = ev.target as HaSwitch;
+    const enabled = switchElement.checked;
+
+    if (!enabled) {
+      if (this._devicePanelOrder || this._deviceHiddenPanels) {
+        const confirm = await showConfirmationDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.profile.customize_sidebar.delete_device_preferences_header"
+          ),
+          text: this.hass.localize(
+            "ui.panel.profile.customize_sidebar.delete_device_preferences_description"
+          ),
+          confirmText: this.hass.localize("ui.common.delete"),
+          destructive: true,
+        });
+
+        if (confirm) {
+          this._devicePanelOrder = undefined;
+          this._deviceHiddenPanels = undefined;
+        } else {
+          // revert switch
+          switchElement.click();
+        }
+      }
+    } else {
+      const sidebarPreferences = await fetchSidebarPreferences(this.hass);
+      this._devicePanelOrder = sidebarPreferences?.panelOrder ?? [];
+      this._deviceHiddenPanels = sidebarPreferences?.hiddenPanels ?? [];
+    }
+  }
+
   private _handleLogOut() {
     showConfirmationDialog(this, {
       title: this.hass.localize("ui.panel.profile.logout_title"),
@@ -251,6 +355,14 @@ class HaProfileSectionGeneral extends LitElement {
           text-align: center;
           color: var(--secondary-text-color);
         }
+
+        ha-expansion-panel {
+          margin: 0 8px 8px;
+        }
+
+        .device-info {
+          color: var(--warning-color);
+        }
       `,
     ];
   }

src/translations/en.json

@@ -7477,9 +7477,14 @@
           "description": "This will hide the sidebar by default, similar to the mobile experience."
         },
         "customize_sidebar": {
-          "header": "Change the order and hide items from the sidebar",
+          "header": "Edit sidebar",
           "description": "You can also press and hold the header of the sidebar to activate edit mode.",
-          "button": "Edit"
+          "overwritten_by_device": "Your user sidebar preferences are overwritten by specific device preferences.",
+          "device_description": "Enable specific sidebar preferences for this device.",
+          "button": "Edit",
+          "delete_device_preferences_header": "Delete device preferences",
+          "delete_device_preferences_description": "This will delete sidebar order and hidden items this device and will show again the user defined preferences.",
+          "device_specific_header": "Device specific sidebar"
         },
         "vibrate": {
           "header": "Vibrate",