Compact header

src/components/ha-sidebar.ts

@@ -386,9 +386,7 @@ class HaSidebar extends LitElement {
             .hass=${hass}
           ></ha-user-badge>
 
-          <span class="item-text">
-            ${hass.user ? hass.user.name : ""}
-          </span>
+          <span class="item-text">${hass.user ? hass.user.name : ""}</span>
         </paper-icon-item>
       </a>
       <div disabled class="bottom-spacer"></div>
@@ -737,7 +735,7 @@ class HaSidebar extends LitElement {
         }
         .menu {
           box-sizing: border-box;
-          height: 65px;
+          height: 48px;
           display: flex;
           padding: 0 8.5px;
           border-bottom: 1px solid transparent;
@@ -790,11 +788,11 @@ class HaSidebar extends LitElement {
         }
 
         paper-listbox {
-          padding: 4px 0;
+          padding: 8px 0 4px 0;
           display: flex;
           flex-direction: column;
           box-sizing: border-box;
-          height: calc(100% - 196px - env(safe-area-inset-bottom));
+          height: calc(100% - 176px - env(safe-area-inset-bottom));
           overflow-x: hidden;
           background: none;
           margin-left: env(safe-area-inset-left);

src/components/ha-tabs.ts

@@ -34,6 +34,9 @@ export class HaTabs extends PaperTabs {
 
       superStyle!.appendChild(
         document.createTextNode(`
+          :host {
+            padding-top: .5px;
+          }
           .not-visible {
             display: none;
           }

src/fake_data/provide_hass.ts

@@ -205,6 +205,7 @@ export const provideHass = (
     translationMetadata: translationMetadata as any,
     dockedSidebar: "auto",
     vibrate: true,
+    compactHeader: false,
     suspendWhenHidden: false,
     moreInfoEntityId: null as any,
     // @ts-ignore

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

@@ -179,7 +179,7 @@ class PanelCalendar extends LitElement {
         }
 
         :host(:not([narrow])) .content {
-          height: calc(100vh - 64px);
+          height: calc(100vh - 48px);
         }
 
         .calendar-list {

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

@@ -57,7 +57,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
     return css`
       :host {
         display: block;
-        height: calc(100vh - 64px);
+        height: calc(100vh - 48px);
       }
       ha-circular-progress {
         padding-bottom: 20px;

src/panels/lovelace/hui-root.ts

@@ -187,7 +187,44 @@ class HUIRoot extends LitElement {
                     .hass=${this.hass}
                     .narrow=${this.narrow}
                   ></ha-menu-button>
-                  <div main-title>${this.config.title || "Home Assistant"}</div>
+                  ${this.hass.compactHeader &&
+                  this.lovelace!.config.views.length > 1
+                    ? html`
+                        <ha-tabs
+                          scrollable
+                          .selected="${this._curView}"
+                          @iron-activate="${this._handleViewSelected}"
+                          dir="${computeRTLDirection(this.hass!)}"
+                        >
+                          ${this.lovelace!.config.views.map(
+                            (view) => html`
+                              <paper-tab
+                                aria-label="${view.title}"
+                                class="${classMap({
+                                  "hide-tab": Boolean(
+                                    view.visible !== undefined &&
+                                      ((Array.isArray(view.visible) &&
+                                        !view.visible.some(
+                                          (e) => e.user === this.hass!.user!.id
+                                        )) ||
+                                        view.visible === false)
+                                  ),
+                                })}"
+                              >
+                                ${view.icon
+                                  ? html`
+                                      <ha-icon
+                                        title="${view.title}"
+                                        .icon="${view.icon}"
+                                      ></ha-icon>
+                                    `
+                                  : view.title || "Unnamed view"}
+                              </paper-tab>
+                            `
+                          )}
+                        </ha-tabs>
+                      `
+                    : html`<div main-title>${this.config.title}</div>`}
                   ${this._conversation(this.hass.config.components)
                     ? html`
                         <mwc-icon-button
@@ -280,7 +317,9 @@ class HUIRoot extends LitElement {
                   </ha-button-menu>
                 </app-toolbar>
               `}
-          ${this.lovelace!.config.views.length > 1 || this._editMode
+          ${(this.lovelace!.config.views.length > 1 &&
+            !this.hass.compactHeader) ||
+          this._editMode
             ? html`
                 <div sticky>
                   <ha-tabs
@@ -372,7 +411,9 @@ class HUIRoot extends LitElement {
           id="view"
           class="${classMap({
             "tabs-hidden":
-              !this._editMode && this.lovelace!.config.views.length < 2,
+              !this._editMode &&
+              (this.lovelace!.config.views.length < 2 ||
+                this.hass.compactHeader),
           })}"
           @ll-rebuild="${this._debouncedConfigChanged}"
         ></div>
@@ -554,10 +595,12 @@ class HUIRoot extends LitElement {
 
   private _enableEditMode(): void {
     this.lovelace!.setEditMode(true);
+    fireEvent(this, "iron-resize");
   }
 
   private _editModeDisable(): void {
     this.lovelace!.setEditMode(false);
+    fireEvent(this, "iron-resize");
   }
 
   private _editLovelace() {
@@ -704,6 +747,10 @@ class HUIRoot extends LitElement {
           --paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
           text-transform: uppercase;
         }
+        app-toolbar ha-tabs {
+          width: 100%;
+          margin: 0 8px;
+        }
         .edit-mode {
           background-color: var(--dark-color, #455a64);
           color: var(--text-dark-color);
@@ -762,7 +809,7 @@ class HUIRoot extends LitElement {
           max-width: 100%;
         }
         #view.tabs-hidden {
-          min-height: calc(100vh - 64px);
+          min-height: calc(100vh - 48px);
         }
         .hide-tab {
           display: none;

src/panels/lovelace/views/hui-masonry-view.ts

@@ -261,9 +261,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         background: var(--lovelace-background);
-        padding-top: 4px;
-        height: 100%;
+        padding-top: 100px;
+        height: calc(100% + 112px);
         box-sizing: border-box;
+        margin-top: -96px;
       }
 
       #badges {

src/panels/lovelace/views/hui-panel-view.ts

@@ -132,7 +132,10 @@ export class PanelView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         background: var(--lovelace-background);
-        height: 100%;
+        height: calc(100% + 116px);
+        margin-top: -100px;
+        box-sizing: border-box;
+        padding-top: 100px;
       }
 
       mwc-fab {

src/panels/map/ha-panel-map.js

@@ -25,7 +25,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="ha-style">
         #map {
-          height: calc(100vh - 64px);
+          height: calc(100vh - 48px);
           width: 100%;
           z-index: 0;
           background: inherit;

src/panels/media-browser/ha-panel-media-browser.ts

@@ -137,14 +137,15 @@ class PanelMediaBrowser extends LitElement {
           --mdc-theme-primary: var(--app-header-text-color);
         }
         ha-media-player-browse {
-          height: calc(100vh - 64px);
+          height: calc(100vh - 48px);
         }
         :host([narrow]) app-toolbar mwc-button {
           width: 65px;
         }
         .heading {
           overflow: hidden;
           white-space: nowrap;
+          margin-top: 4px;
         }
         .heading .secondary-text {
           font-size: 14px;

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

@@ -36,6 +36,7 @@ import "./ha-pick-language-row";
 import "./ha-pick-theme-row";
 import "./ha-push-notifications-row";
 import "./ha-refresh-tokens-card";
+import "./ha-set-compact-header-row";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
 
@@ -132,6 +133,10 @@ class HaPanelProfile extends LitElement {
                   ></ha-force-narrow-row>
                 `
               : ""}
+            <ha-set-compact-header-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-set-compact-header-row>
             ${"vibrate" in navigator
               ? html`
                   <ha-set-vibrate-row

src/panels/profile/ha-set-compact-header-row.ts

@@ -0,0 +1,52 @@
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-switch";
+import type { HaSwitch } from "../../components/ha-switch";
+import type { HomeAssistant } from "../../types";
+import "../../components/ha-settings-row";
+
+@customElement("ha-set-compact-header-row")
+class HaSetCompactHeaderRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.compact_header.header")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.compact_header.description")}
+        </span>
+        <ha-switch
+          .checked=${this.hass.compactHeader}
+          @change=${this._checkedChanged}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _checkedChanged(ev: Event) {
+    const compact = (ev.target as HaSwitch).checked;
+    if (compact === this.hass.compactHeader) {
+      return;
+    }
+    fireEvent(this, "hass-compact-header", {
+      compact,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-set-compact-header-row": HaSetCompactHeaderRow;
+  }
+}

src/resources/styles.ts

@@ -110,6 +110,11 @@ export const haStyle = css`
     color: var(--app-header-text-color, white);
   }
 
+  app-toolbar,
+  div[sticky] {
+    height: 48px;
+  }
+
   app-toolbar [main-title] {
     margin-left: 20px;
   }

src/state/compact-header.mixin.ts

@@ -0,0 +1,31 @@
+import { HASSDomEvent } from "../common/dom/fire_event";
+import { Constructor, HomeAssistant } from "../types";
+import type { PropertyValues } from "lit-element";
+import { storeState } from "../util/ha-pref-storage";
+import { HassBaseEl } from "./hass-base-mixin";
+
+interface CompactHeaderParams {
+  compact: HomeAssistant["compactHeader"];
+}
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "hass-compact-header": CompactHeaderParams;
+  }
+  // for add event listener
+  interface HTMLElementEventMap {
+    "hass-compact-header": HASSDomEvent<CompactHeaderParams>;
+  }
+}
+
+export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
+  class extends superClass {
+    protected firstUpdated(changedProps: PropertyValues) {
+      super.firstUpdated(changedProps);
+      this.addEventListener("hass-compact-header", (ev) => {
+        this._updateHass({ compactHeader: ev.detail.compact });
+        storeState(this.hass!);
+      });
+    }
+  };

src/state/connection-mixin.ts

@@ -47,6 +47,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         translationMetadata,
         dockedSidebar: "docked",
         vibrate: true,
+        compactHeader: false,
         suspendWhenHidden: true,
         moreInfoEntityId: null,
         hassUrl: (path = "") => new URL(path, auth.data.hassUrl).toString(),

src/state/hass-element.ts

@@ -4,6 +4,7 @@ import { connectionMixin } from "./connection-mixin";
 import { dialogManagerMixin } from "./dialog-manager-mixin";
 import DisconnectToastMixin from "./disconnect-toast-mixin";
 import { hapticMixin } from "./haptic-mixin";
+import compactHeaderMixin from "./compact-header.mixin";
 import { HassBaseEl } from "./hass-base-mixin";
 import MoreInfoMixin from "./more-info-mixin";
 import NotificationMixin from "./notification-mixin";
@@ -31,4 +32,5 @@ export class HassElement extends ext(HassBaseEl, [
   hapticMixin,
   panelTitleMixin,
   loggingMixin,
+  compactHeaderMixin,
 ]) {}

src/translations/en.json

@@ -2615,6 +2615,10 @@
           "description": "You can also press and hold the header of the sidebar to activate edit mode.",
           "button": "Edit"
         },
+        "compact_header": {
+          "header": "Compact the Lovelace header",
+          "description": "Removes header title and compresses the Lovelace header."
+        },
         "vibrate": {
           "header": "Vibrate",
           "description": "Enable or disable vibration on this device when controlling devices."

src/types.ts

@@ -239,6 +239,7 @@ export interface HomeAssistant {
   suspendWhenHidden: boolean;
   vibrate: boolean;
   dockedSidebar: "docked" | "always_hidden" | "auto";
+  compactHeader: boolean;
   defaultPanel: string;
   moreInfoEntityId: string | null;
   user?: CurrentUser;

src/util/ha-pref-storage.ts

@@ -6,6 +6,7 @@ const STORED_STATE = [
   "selectedLanguage",
   "vibrate",
   "suspendWhenHidden",
+  "compactHeader",
   "defaultPanel",
 ];
 const STORAGE = window.localStorage || {};