custom_components/browser_mod/config_flow.py

@@ -14,4 +14,5 @@ class BrowserModConfigFlow(config_entries.ConfigFlow):
     async def async_step_user(self, user_input=None):
         if self._async_current_entries():
             return self.async_abort(reason="single_instance_allowed")
+        _LOGGER.error("Running async_create_entry")
         return self.async_create_entry(title="Browser Mod", data={})

hacs.json

@@ -1,4 +1,4 @@
 {
   "name": "browser_mod",
-  "homeassistant": "2022.8.0"
+  "homeassistant": "2022.3.0"
 }

js/config_panel/browser-settings-card.ts

@@ -143,12 +143,9 @@ class BrowserModRegisteredBrowsersCard extends LitElement {
         Mod. <br /><br />
 
         If you ever see a
-        <ha-icon
+        <ha-icon icon="mdi:gesture-tap"></ha-icon> symbol at the bottom right
-          icon="mdi:gesture-tap"
+        corner of the screen, please tap or click anywhere on the page. This
-          style="color: var(--warning-color);"
+        should allow Browser Mod to work again.
-        ></ha-icon>
-        symbol at the bottom right corner of the screen, please tap or click
-        anywhere on the page. This should allow Browser Mod to work again.
       </ha-alert>
     `;
   }

js/config_panel/frontend-settings-card.ts

@@ -82,78 +82,85 @@ class BrowserModFrontendSettingsCard extends LitElement {
             DEFAULT.
           </p>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Title template"}
+
-            .secondary=${"Jinja template for the browser window/tab title"}
+          <ha-settings-row>
-            leftChevron
+            <span slot="heading">Title template</span>
-          >
+            <span slot="description">
+              Jinja template for the browser window/tab title
+            </span>
+          </ha-settings-row>
           <browser-mod-settings-table
             .hass=${this.hass}
             .settingKey=${"titleTemplate"}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Favicon template"}
+
-            .secondary=${"Jinja template for the browser favicon"}
+          <ha-settings-row>
-            leftChevron
+            <span slot="heading">Favicon template</span>
-          >
+            <span slot="description">
+              Jinja template for the browser favicon
+            </span>
+          </ha-settings-row>
           <browser-mod-settings-table
             .hass=${this.hass}
             .settingKey=${"faviconTemplate"}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Hide sidebar"}
+
-            .secondary=${"Completely remove the sidebar from all panels"}
+          <ha-settings-row>
-            leftChevron
+            <span slot="heading">Hide sidebar</span>
-          >
+            <span slot="description">
+              Completely remove the sidebar from all panels
+            </span>
+          </ha-settings-row>
           <browser-mod-settings-table
             .hass=${this.hass}
             .settingKey=${"hideSidebar"}
             .settingSelector=${{ boolean: {}, label: "Hide sidebar" }}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Hide header"}
+
-            .secondary=${"Completely remove the header from all panels"}
+          <ha-settings-row>
-            leftChevron
+            <span slot="heading">Hide header</span>
-          >
+            <span slot="description">
+              Completely remove the header from all panels
+            </span>
+          </ha-settings-row>
           <browser-mod-settings-table
             .hass=${this.hass}
             .settingKey=${"hideHeader"}
             .settingSelector=${{ boolean: {}, label: "Hide header" }}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Default dashboard"}
+
-            .secondary=${`The dashboard that is showed when navigating to ${location.origin}`}
+          <ha-settings-row>
-            leftChevron
+            <span slot="heading">Default dashboard</span>
-          >
+            <span slot="description">
+              The dashboard that is showed when navigating to
+              ${location.origin}/
+            </span>
+          </ha-settings-row>
           <browser-mod-settings-table
             .hass=${this.hass}
             .settingKey=${"defaultPanel"}
             .settingSelector=${dashboardSelector}
             .default=${"lovelace"}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Sidebar order"}
+
-            .secondary=${"Order and visibility of sidebar items."}
-            leftChevron
-          >
           <ha-settings-row>
-              <ol slot="heading">
+            <span slot="heading">Sidebar order</span>
-                <li>Click EDIT</li>
+            <span slot="description">
-                <li>Set up the sidebar as you want it</li>
+              Order and visibility of sidebar items. <br />Click EDIT and set
-                <li>Do NOT click DONE</li>
+              the sidebar up as you want. Then save the settings and finally
-                <li>Add a new setting or edit an old one</li>
+              click RESTORE.
-                <li>Click RESTORE</li>
+            </span>
-              </ol>
             <mwc-button @click=${() => this.toggleEditSidebar()}>
               ${this._editSidebar ? "Restore" : "Edit"}
             </mwc-button>
@@ -166,19 +173,20 @@ class BrowserModFrontendSettingsCard extends LitElement {
             }}
             .default=${"lovelace"}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
 
-          <ha-expansion-panel
+          <div class="separator"></div>
-            .header=${"Sidebar title"}
+
-            .secondary=${"The title at the top of the sidebar"}
+          <ha-settings-row>
-            leftChevron
+            <span slot="heading">Sidebar title</span>
-          >
+            <span slot="description">
+              The title at the top of the sidebar
+            </span>
+          </ha-settings-row>
           <browser-mod-settings-table
             .hass=${this.hass}
             .settingKey=${"sidebarTitle"}
             .settingSelector=${{ text: {} }}
           ></browser-mod-settings-table>
-          </ha-expansion-panel>
         </div>
       </ha-card>
     `;

js/config_panel/main.ts

@@ -31,12 +31,6 @@ loadConfigDashboard().then(() => {
                 .narrow=${this.narrow}
               ></ha-menu-button>
               <div main-title>Browser Mod Settings</div>
-              <a
-                href="https://github.com/thomasloven/hass-browser_mod/blob/master/README.md"
-                target="_blank"
-              >
-                <ha-icon class="icon" .icon=${"mdi:help"}></ha-icon>
-              </a>
             </app-toolbar>
           </app-header>
 
@@ -70,10 +64,6 @@ loadConfigDashboard().then(() => {
           ha-config-section {
             padding: 16px 0;
           }
-          a {
-            color: var(--primary-text-color);
-            text-decoration: none;
-          }
         `,
       ];
     }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "browser_mod",
-  "version": "2.0.0",
+  "version": "2.0.0b4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {