Final tweaks for 2.0 release

custom_components/browser_mod/config_flow.py

@@ -14,5 +14,4 @@ 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.3.0"
+  "homeassistant": "2022.8.0"
 }

js/config_panel/browser-settings-card.ts

@@ -143,9 +143,12 @@ class BrowserModRegisteredBrowsersCard extends LitElement {
         Mod. <br /><br />
 
         If you ever see a
-        <ha-icon icon="mdi:gesture-tap"></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-icon
+          icon="mdi:gesture-tap"
+          style="color: var(--warning-color);"
+        ></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,85 +82,78 @@ class BrowserModFrontendSettingsCard extends LitElement {
             DEFAULT.
           </p>
 
-          <div class="separator"></div>
-
-          <ha-settings-row>
-            <span slot="heading">Title template</span>
-            <span slot="description">
-              Jinja template for the browser window/tab title
-            </span>
-          </ha-settings-row>
+          <ha-expansion-panel
+            .header=${"Title template"}
+            .secondary=${"Jinja template for the browser window/tab title"}
+            leftChevron
+          >
             <browser-mod-settings-table
               .hass=${this.hass}
               .settingKey=${"titleTemplate"}
             ></browser-mod-settings-table>
+          </ha-expansion-panel>
 
-          <div class="separator"></div>
-
-          <ha-settings-row>
-            <span slot="heading">Favicon template</span>
-            <span slot="description">
-              Jinja template for the browser favicon
-            </span>
-          </ha-settings-row>
+          <ha-expansion-panel
+            .header=${"Favicon template"}
+            .secondary=${"Jinja template for the browser favicon"}
+            leftChevron
+          >
             <browser-mod-settings-table
               .hass=${this.hass}
               .settingKey=${"faviconTemplate"}
             ></browser-mod-settings-table>
+          </ha-expansion-panel>
 
-          <div class="separator"></div>
-
-          <ha-settings-row>
-            <span slot="heading">Hide sidebar</span>
-            <span slot="description">
-              Completely remove the sidebar from all panels
-            </span>
-          </ha-settings-row>
+          <ha-expansion-panel
+            .header=${"Hide sidebar"}
+            .secondary=${"Completely remove the sidebar from all panels"}
+            leftChevron
+          >
             <browser-mod-settings-table
               .hass=${this.hass}
               .settingKey=${"hideSidebar"}
               .settingSelector=${{ boolean: {}, label: "Hide sidebar" }}
             ></browser-mod-settings-table>
+          </ha-expansion-panel>
 
-          <div class="separator"></div>
-
-          <ha-settings-row>
-            <span slot="heading">Hide header</span>
-            <span slot="description">
-              Completely remove the header from all panels
-            </span>
-          </ha-settings-row>
+          <ha-expansion-panel
+            .header=${"Hide header"}
+            .secondary=${"Completely remove the header from all panels"}
+            leftChevron
+          >
             <browser-mod-settings-table
               .hass=${this.hass}
               .settingKey=${"hideHeader"}
               .settingSelector=${{ boolean: {}, label: "Hide header" }}
             ></browser-mod-settings-table>
+          </ha-expansion-panel>
 
-          <div class="separator"></div>
-
-          <ha-settings-row>
-            <span slot="heading">Default dashboard</span>
-            <span slot="description">
-              The dashboard that is showed when navigating to
-              ${location.origin}/
-            </span>
-          </ha-settings-row>
+          <ha-expansion-panel
+            .header=${"Default dashboard"}
+            .secondary=${`The dashboard that is showed when navigating to ${location.origin}`}
+            leftChevron
+          >
             <browser-mod-settings-table
               .hass=${this.hass}
               .settingKey=${"defaultPanel"}
               .settingSelector=${dashboardSelector}
               .default=${"lovelace"}
             ></browser-mod-settings-table>
+          </ha-expansion-panel>
 
-          <div class="separator"></div>
-
+          <ha-expansion-panel
+            .header=${"Sidebar order"}
+            .secondary=${"Order and visibility of sidebar items."}
+            leftChevron
+          >
             <ha-settings-row>
-            <span slot="heading">Sidebar order</span>
-            <span slot="description">
-              Order and visibility of sidebar items. <br />Click EDIT and set
-              the sidebar up as you want. Then save the settings and finally
-              click RESTORE.
-            </span>
+              <ol slot="heading">
+                <li>Click EDIT</li>
+                <li>Set up the sidebar as you want it</li>
+                <li>Do NOT click DONE</li>
+                <li>Add a new setting or edit an old one</li>
+                <li>Click RESTORE</li>
+              </ol>
               <mwc-button @click=${() => this.toggleEditSidebar()}>
                 ${this._editSidebar ? "Restore" : "Edit"}
               </mwc-button>
@@ -173,20 +166,19 @@ class BrowserModFrontendSettingsCard extends LitElement {
               }}
               .default=${"lovelace"}
             ></browser-mod-settings-table>
+          </ha-expansion-panel>
 
-          <div class="separator"></div>
-
-          <ha-settings-row>
-            <span slot="heading">Sidebar title</span>
-            <span slot="description">
-              The title at the top of the sidebar
-            </span>
-          </ha-settings-row>
+          <ha-expansion-panel
+            .header=${"Sidebar title"}
+            .secondary=${"The title at the top of the sidebar"}
+            leftChevron
+          >
             <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,6 +31,12 @@ 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>
 
@@ -64,6 +70,10 @@ 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.0b4",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {