import { LitElement, html, css } from "lit"; import { property, state } from "lit/decorators.js"; import { loadDeveloperToolsTemplate, selectTree } from "../helpers"; import "./browser-mod-settings-table"; loadDeveloperToolsTemplate(); class BrowserModFrontendSettingsCard extends LitElement { @property() hass; @state() _dashboards = []; @state() _editSidebar = false; _savedSidebar = { panelOrder: [], hiddenPanels: [] }; firstUpdated() { window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate() ); } updated(changedProperties) { if ( changedProperties.has("hass") && changedProperties.get("hass") === undefined ) { (async () => (this._dashboards = await this.hass.callWS({ type: "lovelace/dashboards/list", })))(); } } async toggleEditSidebar() { const sideBar: any = await selectTree( document, "home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar" ); sideBar.editMode = !sideBar.editMode; this._editSidebar = sideBar.editMode; if (this._editSidebar) { this._savedSidebar = { panelOrder: sideBar._panelOrder, hiddenPanels: sideBar._hiddenPanels, }; } else { sideBar._panelOrder = this._savedSidebar.panelOrder ?? []; sideBar._hiddenPanels = this._savedSidebar.hiddenPanels ?? []; this._savedSidebar = { panelOrder: [], hiddenPanels: [] }; } } render() { const db = this._dashboards.map((d) => { return { value: d.url_path, label: d.title }; }); const dashboardSelector = { select: { options: [{ value: "lovelace", label: "lovelace (default)" }, ...db], custom_value: true, }, }; return html`
The settings in this section severely change the way the Home Assistant frontend works and looks. It is very easy to forget that you made a setting here when you switch devices or user.

Do not report any issues to Home Assistant before clearing EVERY setting here and thouroghly clearing all your browser caches. Failure to do so means you risk wasting a lot of peoples time, and you will be severly and rightfully ridiculed.

Settings below are applied by first match. I.e. if a matching User setting exists, it will be applied. Otherwise any matching Browser setting and otherwise the GLOBAL setting if that differs from DEFAULT.

Title template Jinja template for the browser window/tab title
Favicon template Jinja template for the browser favicon
Hide sidebar Completely remove the sidebar from all panels
Hide header Completely remove the header from all panels
Default dashboard The dashboard that is showed when navigating to ${location.origin}/
Sidebar order Order and visibility of sidebar items.
Click EDIT and set the sidebar up as you want. Then save the settings and finally click RESTORE.
this.toggleEditSidebar()}> ${this._editSidebar ? "Restore" : "Edit"}
Sidebar title The title at the top of the sidebar
`; } static get styles() { return css` .box { border: 1px solid var(--divider-color); padding: 8px; } .separator { border-bottom: 1px solid var(--divider-color); margin: 16px -16px 0px; } img.favicon { width: 64px; height: 64px; margin-left: 16px; } mwc-tab-bar ha-icon { display: flex; align-items: center; } `; } } customElements.define( "browser-mod-frontend-settings-card", BrowserModFrontendSettingsCard );