Fix type

src/components/ha-sidebar.ts

@@ -8,6 +8,7 @@ import {
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
+  mdiHammer,
   mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
@@ -56,7 +57,7 @@ import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config"];
+const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
@@ -65,12 +66,14 @@ const SORT_VALUE_URL_PATHS = {
   map: 2,
   logbook: 3,
   history: 4,
+  "developer-tools": 9,
   config: 11,
 };
 
 const PANEL_ICONS = {
   calendar: mdiCalendar,
   config: mdiCog,
+  "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
   history: mdiChartBox,
   logbook: mdiFormatListBulletedType,
@@ -1030,6 +1033,19 @@ class HaSidebar extends LitElement {
           white-space: nowrap;
         }
 
+        .dev-tools {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding: 0 8px;
+          width: 256px;
+          box-sizing: border-box;
+        }
+
+        .dev-tools a {
+          color: var(--sidebar-icon-color);
+        }
+
         .tooltip {
           display: none;
           position: absolute;

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -209,6 +209,7 @@ export class QuickBar extends LitElement {
   private _handleOpened() {
     this.updateComplete.then(() => {
       this._done = true;
+      (this._filterInputField as any)?.inputElement.inputElement.focus();
     });
   }
 
@@ -384,12 +385,12 @@ export class QuickBar extends LitElement {
     this._focusListElement = ev.target as ListItem;
     if (ev.key === "ArrowUp") {
       if (isFirstListItem) {
-        this._filterInputField?.focus();
+        (this._filterInputField as any)?.inputElement.inputElement.focus();
       }
     }
     if (ev.key === "Backspace" || isSingleCharacter) {
       (ev.currentTarget as List).scrollTop = 0;
-      this._filterInputField?.focus();
+      (this._filterInputField as any)?.inputElement.inputElement.focus();
     }
   }
 

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

@@ -4,7 +4,6 @@ import {
   mdiCellphoneCog,
   mdiCog,
   mdiDevices,
-  mdiHammer,
   mdiHomeAssistant,
   mdiInformation,
   mdiLightningBolt,
@@ -73,7 +72,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/hassio",
       translationKey: "supervisor",
       iconPath: mdiHomeAssistant,
-      iconColor: "#F1C447",
+      iconColor: "#4084CD",
       component: "hassio",
     },
     {
@@ -117,12 +116,6 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#4A5963",
       core: true,
     },
-    {
-      path: "/developer-tools",
-      translationKey: "developer_tools",
-      iconPath: mdiHammer,
-      iconColor: "#4084CD",
-    },
   ],
   devices: [
     {

src/translations/en.json

@@ -987,10 +987,6 @@
           "settings": {
             "title": "Settings",
             "description": "Basic settings, server controls, logs and info"
-          },
-          "developer_tools": {
-            "title": "Developer Tools",
-            "description": "Tools to help create automations and scripts"
           }
         },
         "common": {