Star working on a config panel

js/browser_mod_panel.ts

@@ -0,0 +1,107 @@
+import { LitElement, html, css } from "lit";
+import { deviceID } from "card-tools/src/deviceID";
+
+class BrowserModPanel extends LitElement {
+  hass;
+  narrow;
+  render() {
+    return html`
+      <ha-app-layout>
+        <app-header slot="header" fixed>
+          <app-toolbar>
+            <ha-menu-button
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+            ></ha-menu-button>
+            <div main-title>Browser Mod Settingss</div>
+          </app-toolbar>
+        </app-header>
+
+        <ha-config-section .narrow=${this.narrow} full-width>
+          <ha-card header="Device ID">
+            <div class="card-content">
+              The device ID is a unique identifier for your browser/device
+              combination.
+              <ha-textfield .value=${deviceID}> </ha-textfield>
+            </div>
+            <div class="card-actions">
+              <div class="spacer"></div>
+              <mwc-button>Update</mwc-button>
+            </div>
+          </ha-card>
+
+          <ha-card header="Tweaks">
+            <div class="card-content">
+              <div class="option">
+                <h3>Cool function</h3>
+                <ha-switch> </ha-switch>
+              </div>
+              Enabling this will cause cool stuff to happen.
+              <div class="option">
+                <h3>Another function</h3>
+                <ha-switch> </ha-switch>
+              </div>
+              Enabling this will cause less cool stuff to happen.
+            </div>
+          </ha-card>
+        </ha-config-section>
+      </ha-app-layout>
+    `;
+  }
+
+  static get styles() {
+    return [
+      ...(customElements.get("ha-config-dashboard") as any).styles,
+      css`
+        :host {
+          --app-header-background-color: var(--sidebar-background-color);
+          --app-header-text-color: var(--sidebar-text-color);
+          --app-header-border-bottom: 1px solid var(--divider-color);
+        }
+        .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;
+        }
+      `,
+    ];
+  }
+}
+
+const loadDevTools = async () => {
+  if (customElements.get("ha-config-dashboard")) return;
+  const ppResolver = document.createElement("partial-panel-resolver");
+  const routes = (ppResolver as any).getRoutes([
+    {
+      component_name: "config",
+      url_path: "a",
+    },
+  ]);
+  await routes?.routes?.a?.load?.();
+  const configRouter = document.createElement("ha-panel-config");
+  await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.();
+  await customElements.whenDefined("ha-config-dashboard");
+};
+
+loadDevTools().then(() => {
+  customElements.define("browser-mod-panel", BrowserModPanel);
+});

js/types.ts

@@ -1,6 +1,6 @@
 const a = {};
 
-import { BrowserMod } from "./main";
+import { BrowserMod } from "./browser_mod";
 
 interface FullyKiosk {
   // Get device info