Reorder based on ABC and vibes

src/common/color/compute-color.ts

@@ -1,6 +1,7 @@
 export const THEME_COLORS = new Set([
   "primary",
   "accent",
+  "disabled",
   "red",
   "pink",
   "purple",
@@ -24,9 +25,6 @@ export const THEME_COLORS = new Set([
   "blue-grey",
   "black",
   "white",
-  "primary-text",
-  "secondary-text",
-  "disabled",
 ]);
 
 export function computeCssColor(color: string): string {

src/components/ha-color-picker.ts

@@ -1,8 +1,7 @@
 import { mdiInvertColorsOff, mdiPalette } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeKeys } from "../common/translations/localize";
@@ -50,40 +49,11 @@ export class HaColorPicker extends LitElement {
         .rowRenderer=${this._rowRenderer}
         .valueRenderer=${this._valueRenderer}
         @value-changed=${this._valueChanged}
-        .notFoundLabel=${this.hass.localize(
-          "ui.components.color-picker.no_colors_found"
-        )}
-        .getAdditionalItems=${this._getAdditionalItems}
       >
       </ha-generic-picker>
     `;
   }
 
-  private _getAdditionalItems = (
-    searchString?: string
-  ): PickerComboBoxItem[] => {
-    if (!searchString || searchString.trim() === "") {
-      return [];
-    }
-    const colors = this._getColors(
-      this.includeNone,
-      this.includeState,
-      this.defaultColor,
-      this.value
-    );
-    const exactMatch = colors.find((color) => color.id === searchString);
-    if (exactMatch) {
-      return [];
-    }
-    return [
-      {
-        id: searchString,
-        primary: this.hass.localize("ui.components.color-picker.custom_color"),
-        secondary: searchString,
-      },
-    ];
-  };
-
   private _getItems = () =>
     this._getColors(
       this.includeNone,
@@ -92,71 +62,72 @@ export class HaColorPicker extends LitElement {
       this.value
     );
 
-  private _getColors = memoizeOne(
-    (
-      includeNone: boolean,
-      includeState: boolean,
-      defaultColor: string | undefined,
-      currentValue: string | undefined
-    ): PickerComboBoxItem[] => {
-      const items: PickerComboBoxItem[] = [];
+  private _getColors = (
+    includeNone: boolean,
+    includeState: boolean,
+    defaultColor: string | undefined,
+    currentValue: string | undefined
+  ): PickerComboBoxItem[] => {
+    const items: PickerComboBoxItem[] = [];
 
-      const defaultSuffix = this.hass.localize(
-        "ui.components.color-picker.default"
-      );
+    const defaultSuffix = this.hass.localize(
+      "ui.components.color-picker.default"
+    );
 
-      const addDefaultSuffix = (label: string, isDefault: boolean) =>
-        isDefault && defaultSuffix ? `${label} (${defaultSuffix})` : label;
+    const addDefaultSuffix = (label: string, isDefault: boolean) =>
+      isDefault && defaultSuffix ? `${label} (${defaultSuffix})` : label;
 
-      if (includeNone) {
-        const noneLabel =
-          this.hass.localize("ui.components.color-picker.none") || "None";
-        items.push({
-          id: "none",
-          primary: addDefaultSuffix(noneLabel, defaultColor === "none"),
-          icon_path: mdiInvertColorsOff,
-        });
-      }
-
-      if (includeState) {
-        const stateLabel =
-          this.hass.localize("ui.components.color-picker.state") || "State";
-        items.push({
-          id: "state",
-          primary: addDefaultSuffix(stateLabel, defaultColor === "state"),
-          icon_path: mdiPalette,
-        });
-      }
-
-      Array.from(THEME_COLORS).forEach((color) => {
-        const themeLabel =
-          this.hass.localize(
-            `ui.components.color-picker.colors.${color}` as LocalizeKeys
-          ) || color;
-        items.push({
-          id: color,
-          primary: addDefaultSuffix(themeLabel, defaultColor === color),
-        });
+    if (includeNone) {
+      const noneLabel =
+        this.hass.localize("ui.components.color-picker.none") || "None";
+      items.push({
+        id: "none",
+        primary: addDefaultSuffix(noneLabel, defaultColor === "none"),
+        icon_path: mdiInvertColorsOff,
+        sorting_label: noneLabel,
       });
-
-      const isSpecial =
-        currentValue === "none" ||
-        currentValue === "state" ||
-        THEME_COLORS.has(currentValue || "");
-
-      const hasValue = currentValue && currentValue.length > 0;
-
-      if (hasValue && !isSpecial) {
-        items.push({
-          id: currentValue!,
-          primary: currentValue!,
-          sorting_label: currentValue!,
-        });
-      }
-
-      return items;
     }
-  );
+
+    if (includeState) {
+      const stateLabel =
+        this.hass.localize("ui.components.color-picker.state") || "State";
+      items.push({
+        id: "state",
+        primary: addDefaultSuffix(stateLabel, defaultColor === "state"),
+        icon_path: mdiPalette,
+        sorting_label: stateLabel,
+      });
+    }
+
+    Array.from(THEME_COLORS).forEach((color) => {
+      const themeLabel =
+        this.hass.localize(
+          `ui.components.color-picker.colors.${color}` as LocalizeKeys
+        ) || color;
+      items.push({
+        id: color,
+        primary: addDefaultSuffix(themeLabel, defaultColor === color),
+        sorting_label: themeLabel,
+      });
+    });
+
+    const isSpecial =
+      currentValue === "none" ||
+      currentValue === "state" ||
+      THEME_COLORS.has(currentValue || "");
+
+    const hasValue = currentValue && currentValue.length > 0;
+
+    if (hasValue && !isSpecial) {
+      items.push({
+        id: currentValue!,
+        primary: currentValue!,
+        sorting_label: currentValue!,
+      });
+    }
+
+    return items;
+  };
 
   private _rowRenderer: (
     item: PickerComboBoxItem,
@@ -174,9 +145,6 @@ export class HaColorPicker extends LitElement {
               ${this._renderColorCircle(item.id)}
             </span>`}
       <span slot="headline">${item.primary}</span>
-      ${item.secondary
-        ? html`<span slot="supporting-text">${item.secondary}</span>`
-        : nothing}
     </ha-combo-box-item>
   `;
 

src/components/ha-picker-combo-box.ts

@@ -436,7 +436,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         filteredItems.push(NO_ITEMS_AVAILABLE_ID);
       }
 
-      const additionalItems = this._getAdditionalItems(searchString);
+      const additionalItems = this._getAdditionalItems();
       filteredItems.push(...additionalItems);
 
       if (this.searchFn) {

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

@@ -8,7 +8,7 @@ import {
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -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";
@@ -155,8 +154,6 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @state() private _tip?: string;
 
   @state() private _repairsIssues: { issues: RepairsIssue[]; total: number } = {
@@ -164,21 +161,24 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
     total: 0,
   };
 
-  private _pages = memoizeOne((cloudStatus, isCloudLoaded) => {
-    const pages: PageNavigation[] = [];
-    if (isCloudLoaded) {
-      pages.push({
-        component: "cloud",
-        path: "/config/cloud",
-        name: "Home Assistant Cloud",
-        info: cloudStatus,
-        iconPath: mdiCloudLock,
-        iconColor: "#3B808E",
-        translationKey: "cloud",
-      });
-    }
-    return [...pages, ...configSections.dashboard];
-  });
+  private _pages = memoizeOne((cloudStatus, isCloudLoaded) => [
+    isCloudLoaded
+      ? [
+          {
+            component: "cloud",
+            path: "/config/cloud",
+            name: "Home Assistant Cloud",
+            info: cloudStatus,
+            iconPath: mdiCloudLock,
+            iconColor: "#3B808E",
+            translationKey: "cloud",
+          },
+          ...configSections.dashboard,
+        ]
+      : configSections.dashboard,
+    configSections.dashboard_2,
+    configSections.dashboard_3,
+  ]);
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -308,18 +308,22 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
                   : ""}
               </ha-card>`
             : ""}
-
-          <ha-card outlined>
-            <ha-config-navigation
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-              .showAdvanced=${this.showAdvanced}
-              .pages=${this._pages(
-                this.cloudStatus,
-                isComponentLoaded(this.hass, "cloud")
-              )}
-            ></ha-config-navigation>
-          </ha-card>
+          ${this._pages(
+            this.cloudStatus,
+            isComponentLoaded(this.hass, "cloud")
+          ).map((categoryPages) =>
+            categoryPages.length === 0
+              ? nothing
+              : html`
+                  <ha-card outlined>
+                    <ha-config-navigation
+                      .hass=${this.hass}
+                      .narrow=${this.narrow}
+                      .pages=${categoryPages}
+                    ></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,6 +3,7 @@ import {
   mdiAccount,
   mdiBackupRestore,
   mdiBadgeAccountHorizontal,
+  mdiBluetooth,
   mdiCellphoneCog,
   mdiCog,
   mdiDatabase,
@@ -25,10 +26,14 @@ import {
   mdiScrewdriver,
   mdiScriptText,
   mdiShape,
+  mdiLan,
   mdiSofa,
   mdiTools,
   mdiUpdate,
   mdiViewDashboard,
+  mdiZigbee,
+  mdiZWave,
+  mdiRouterWireless,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -101,6 +106,65 @@ export const configSections: Record<string, PageNavigation[]> = {
       iconPath: mdiMicrophone,
       iconColor: "#3263C3",
     },
+  ],
+  dashboard_2: [
+    {
+      path: "/config/matter",
+      name: "Matter",
+      iconPath:
+        "M7.228375 6.41685c0.98855 0.80195 2.16365 1.3412 3.416275 1.56765V1.30093l1.3612 -0.7854275 1.360125 0.7854275V7.9845c1.252875 -0.226675 2.4283 -0.765875 3.41735 -1.56765l2.471225 1.4293c-4.019075 3.976275 -10.490025 3.976275 -14.5091 0l2.482925 -1.4293Zm3.00335 17.067575c1.43325 -5.47035 -1.8052 -11.074775 -7.2604 -12.564675v2.859675c1.189125 0.455 2.244125 1.202875 3.0672 2.174275L0.25 19.2955v1.5719l1.3611925 0.781175L7.39865 18.3068c0.430175 1.19825 0.550625 2.48575 0.35015 3.743l2.482925 1.434625ZM21.034 10.91975c-5.452225 1.4932 -8.6871 7.09635 -7.254025 12.564675l2.47655 -1.43035c-0.200025 -1.257275 -0.079575 -2.544675 0.35015 -3.743025l5.7832 3.337525L23.75 20.86315V19.2955L17.961475 15.9537c0.8233 -0.97115 1.878225 -1.718975 3.0672 -2.174275l0.005325 -2.859675Z",
+      iconColor: "#2458B3",
+      component: "matter",
+      translationKey: "matter",
+    },
+    {
+      path: "/config/zha",
+      name: "Zigbee",
+      iconPath: mdiZigbee,
+      iconColor: "#E74011",
+      component: "zha",
+      translationKey: "zha",
+    },
+    {
+      path: "/config/zwave_js",
+      name: "Z-Wave",
+      iconPath: mdiZWave,
+      iconColor: "#153163",
+      component: "zwave_js",
+      translationKey: "zwave_js",
+    },
+    {
+      path: "/config/thread",
+      name: "Thread",
+      iconPath: mdiRouterWireless,
+      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: "/config/tags",
       translationKey: "tags",
@@ -108,6 +172,8 @@ export const configSections: Record<string, PageNavigation[]> = {
       iconColor: "#616161",
       component: "tag",
     },
+  ],
+  dashboard_3: [
     {
       path: "/config/person",
       translationKey: "people",

src/translations/en.json

@@ -921,13 +921,9 @@
         "default": "default",
         "state": "State color",
         "none": "No color",
-        "custom_color": "Custom color",
-        "no_colors_found": "No matching colors found",
         "colors": {
           "primary": "Primary",
           "accent": "Accent",
-          "primary-text": "Main text",
-          "secondary-text": "Secondary text",
           "disabled": "Disabled",
           "inactive": "Inactive",
           "red": "Red",
@@ -2333,6 +2329,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": {