Show the protocols on the top level of the config section

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

@@ -39,7 +39,6 @@ import {
 } from "../../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showRestartDialog } from "../../../dialogs/restart/show-dialog-restart";
 import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog";
-import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
@@ -164,21 +163,24 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     total: 0,
   };
 
-  private _pages = memoizeOne((cloudStatus, isCloudLoaded) => {
+  private _pages = memoizeOne((cloudStatus, isCloudLoaded) => [
-    const pages: PageNavigation[] = [];
+    isCloudLoaded
-    if (isCloudLoaded) {
+      ? [
-      pages.push({
+          {
-        component: "cloud",
+            component: "cloud",
-        path: "/config/cloud",
+            path: "/config/cloud",
-        name: "Home Assistant Cloud",
+            name: "Home Assistant Cloud",
-        info: cloudStatus,
+            info: cloudStatus,
-        iconPath: mdiCloudLock,
+            iconPath: mdiCloudLock,
-        iconColor: "#3B808E",
+            iconColor: "#3B808E",
-        translationKey: "cloud",
+            translationKey: "cloud",
-      });
+          },
-    }
+          ...configSections.dashboard,
-    return [...pages, ...configSections.dashboard];
+        ]
-  });
+      : configSections.dashboard,
+    configSections.dashboard_2,
+    configSections.dashboard_3,
+  ]);
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -308,18 +310,21 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
                   : ""}
               </ha-card>`
             : ""}
-
+          ${this._pages(
-          <ha-card outlined>
+            this.cloudStatus,
-            <ha-config-navigation
+            isComponentLoaded(this.hass, "cloud")
-              .hass=${this.hass}
+          ).map(
-              .narrow=${this.narrow}
+            (categoryPages) => html`
-              .showAdvanced=${this.showAdvanced}
+              <ha-card outlined>
-              .pages=${this._pages(
+                <ha-config-navigation
-                this.cloudStatus,
+                  .hass=${this.hass}
-                isComponentLoaded(this.hass, "cloud")
+                  .narrow=${this.narrow}
-              )}
+                  .showAdvanced=${this.showAdvanced}
-            ></ha-config-navigation>
+                  .pages=${categoryPages}
-          </ha-card>
+                ></ha-config-navigation>
+              </ha-card>
+            `
+          )}
           <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
         </ha-config-section>
       </ha-top-app-bar-fixed>

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

@@ -3,14 +3,17 @@ import {
   mdiAccount,
   mdiBackupRestore,
   mdiBadgeAccountHorizontal,
+  mdiBluetooth,
   mdiCellphoneCog,
   mdiCog,
   mdiDatabase,
   mdiDevices,
   mdiFlask,
+  mdiHub,
   mdiInformation,
   mdiInformationOutline,
   mdiLabel,
+  mdiLan,
   mdiLightningBolt,
   mdiMapMarkerRadius,
   mdiMathLog,
@@ -20,15 +23,19 @@ import {
   mdiNfcVariant,
   mdiPalette,
   mdiPaletteSwatch,
+  mdiProtocol,
   mdiPuzzle,
   mdiRobot,
   mdiScrewdriver,
   mdiScriptText,
   mdiShape,
   mdiSofa,
+  mdiStore,
   mdiTools,
   mdiUpdate,
   mdiViewDashboard,
+  mdiZigbee,
+  mdiZWave,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -101,6 +108,72 @@ export const configSections: Record<string, PageNavigation[]> = {
       iconPath: mdiMicrophone,
       iconColor: "#3263C3",
     },
+  ],
+  dashboard_2: [
+    {
+      path: "/config/zwave_js",
+      name: "Z-Wave",
+      iconPath: mdiZWave,
+      iconColor: "#153163",
+      component: "zwave_js",
+      translationKey: "zwave_js",
+    },
+    {
+      path: "/config/zha",
+      name: "Zigbee",
+      iconPath: mdiZigbee,
+      iconColor: "#E74011",
+      component: "zha",
+      translationKey: "zha",
+    },
+    {
+      path: "/config/matter",
+      name: "Matter",
+      iconPath: mdiHub,
+      iconColor: "#2458B3",
+      component: "matter",
+      translationKey: "matter",
+    },
+    {
+      path: "/config/thread",
+      name: "Thread",
+      iconPath: mdiProtocol,
+      iconColor: "#ED7744",
+      component: "thread",
+      translationKey: "thread",
+    },
+    {
+      path: "/config/bluetooth",
+      name: "Bluetooth",
+      iconPath: mdiBluetooth,
+      iconColor: "#0082FC",
+      component: "bluetooth",
+      translationKey: "bluetooth",
+    },
+    {
+      path: "/knx",
+      name: "KNX",
+      iconPath: mdiLan,
+      iconColor: "#4EAA66",
+      component: "knx",
+      translationKey: "knx",
+    },
+    {
+      path: "/insteon",
+      name: "Insteon",
+      iconPath: mdiLan,
+      iconColor: "#E4002C",
+      component: "insteon",
+      translationKey: "insteon",
+    },
+    {
+      path: "/hacs",
+      name: "Home Assistant Community Store",
+      iconPath: mdiStore,
+      iconColor: "#41BDF5",
+      component: "hacs",
+      translationKey: "hacs",
+    },
     {
       path: "/config/tags",
       translationKey: "tags",
@@ -108,6 +181,8 @@ export const configSections: Record<string, PageNavigation[]> = {
       iconColor: "#616161",
       component: "tag",
     },
+  ],
+  dashboard_3: [
     {
       path: "/config/person",
       translationKey: "people",

src/translations/en.json

@@ -2308,6 +2308,30 @@
           },
           "cloud": {
             "secondary": "Loading..."
+          },
+          "zwave_js": {
+            "secondary": "Manage your Z-Wave network"
+          },
+          "zha": {
+            "secondary": "Manage your Zigbee network"
+          },
+          "matter": {
+            "secondary": "Manage your Matter network"
+          },
+          "thread": {
+            "secondary": "Manage your Thread network"
+          },
+          "bluetooth": {
+            "secondary": "Manage your Bluetooth devices"
+          },
+          "knx": {
+            "secondary": "Manage your KNX network"
+          },
+          "insteon": {
+            "secondary": "Manage your Insteon network"
+          },
+          "hacs": {
+            "secondary": "Manage community integrations and frontend modules"
           }
         },
         "common": {