Add kiosk settings

js/config_panel/main.ts

@@ -313,34 +313,18 @@ loadDevTools().then(() => {
             --app-header-border-bottom: 1px solid var(--divider-color);
             --ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
           }
+          ha-config-section {
+            padding: 16px 0;
+          }
           .card-header {
             display: flex;
             justify-content: space-between;
           }
-          .card-actions {
-            display: flex;
-          }
-          .spacer {
-            flex-grow: 1;
-          }
           ha-textfield {
             width: 250px;
             display: block;
             margin-top: 8px;
           }
-          .option {
-            display: flex;
-            margin-top: 16px;
-          }
-          .option h3 {
-            flex-grow: 1;
-            margin: 0;
-          }
-          .option ha-switch {
-            margin-top: 0.25em;
-            margin-right: 7px;
-            margin-left: 0.5em;
-          }
           ha-icon-button > * {
             display: flex;
           }

js/config_panel/settings-card.ts

@@ -19,7 +19,7 @@ class BrowserModSettingsCard extends LitElement {
   render() {
     const level = ["browser", "user", "global"][this._selectedTab];
     return html`
-      <ha-card header="Auto settings" outlined>
+      <ha-card header="Frontend settings" outlined>
         <div class="card-content">
           <mwc-tab-bar
             .activeIndex=${this._selectedTab}
@@ -54,24 +54,54 @@ class BrowserModSettingsCard extends LitElement {
 
     return html`
       <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
-        <span slot="description"> Hide sidebar and header </span>
-        Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")}
+        <span slot="heading">Hide Sidebar</span>
+        <span slot="description">Hide the sidebar and hamburger menu</span>
+        Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+        ${OVERRIDDEN("hideSidebar")}
       </ha-settings-row>
       <ha-settings-row>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", true, level)}
+          @click=${() =>
+            window.browser_mod.set_setting("hideSidebar", true, level)}
         >
           Enable
         </mwc-button>
         <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", false, level)}
+          @click=${() =>
+            window.browser_mod.set_setting("hideSidebar", false, level)}
         >
           Disable
         </mwc-button>
         <mwc-button
           @click=${() =>
-            window.browser_mod.set_setting("kiosk", undefined, level)}
+            window.browser_mod.set_setting("hideSidebar", undefined, level)}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+
+      <ha-settings-row>
+        <span slot="heading">Hide Header</span>
+        <span slot="description">Hide the header on all pages</span>
+        Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+        ${OVERRIDDEN("hideHeader")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", true, level)}
+        >
+          Enable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", false, level)}
+        >
+          Disable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", undefined, level)}
         >
           Clear
         </mwc-button>

js/helpers.ts

@@ -89,8 +89,6 @@ export const loadHaForm = async () => {
 // Loads in ha-config-dashboard which is used to copy styling
 // Also provides ha-settings-row
 export const loadDevTools = async () => {
-  if (customElements.get("ha-config-dashboard")) return;
-
   await customElements.whenDefined("partial-panel-resolver");
   const ppResolver = document.createElement("partial-panel-resolver");
   const routes = (ppResolver as any).getRoutes([

js/plugin/auto-settings.ts

@@ -1,3 +1,5 @@
+import { selectTree } from "../helpers";
+
 export const AutoSettingsMixin = (SuperClass) => {
   return class AutoSettingsMixinClass extends SuperClass {
     constructor() {
@@ -20,6 +22,27 @@ export const AutoSettingsMixin = (SuperClass) => {
           settings.sidebarHiddenPanels
         );
       }
+
+      if (settings.hideSidebar === true) {
+        selectTree(
+          document.body,
+          "home-assistant$home-assistant-main$app-drawer-layout"
+        ).then((el) => el.style.setProperty("--app-drawer-width", "0px"));
+        selectTree(
+          document.body,
+          "home-assistant$home-assistant-main$app-drawer-layout app-drawer"
+        ).then((el) => el.remove());
+      }
+      if (settings.hideHeader === true) {
+        customElements.whenDefined("app-header-layout").then(() => {
+          const appHeader = customElements.get("app-header").prototype;
+          const _attached = appHeader.attached;
+          appHeader.attached = function () {
+            _attached.bind(this)();
+            this.style.setProperty("display", "none");
+          };
+        });
+      }
     }
   };
 };

js/plugin/main.ts

@@ -52,7 +52,7 @@ import { AutoSettingsMixin } from "./auto-settings";
   - Saved frontend settings
     X Framework
     x Save sidebar
-    - Kiosk mode
+    x Kiosk mode
     - Default panel?
     - Screensaver?
   - Tweaks