From d74fb8717c9e925471aa5ce3b88a6c91de8bd510 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 12 Dec 2022 15:47:05 +0100
Subject: [PATCH] Fix sorting auto generated dashboard (#14707)

---
 .../common/generate-lovelace-config.ts        | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index 865de77944..ffbcd951da 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -491,9 +491,15 @@ export const generateDefaultViewConfig = (
 
   const areaCards: LovelaceCardConfig[] = [];
 
-  for (const [areaId, areaEntities] of Object.entries(
+  const sortedAreas = Object.entries(
     splittedByAreaDevice.areasWithEntities
-  )) {
+  ).sort((a, b) => {
+    const areaA = areaEntries[a[0]];
+    const areaB = areaEntries[b[0]];
+    return stringCompare(areaA.name, areaB.name);
+  });
+
+  for (const [areaId, areaEntities] of sortedAreas) {
     const area = areaEntries[areaId];
     areaCards.push(
       ...computeCards(
@@ -506,13 +512,20 @@ export const generateDefaultViewConfig = (
     );
   }
 
-  areaCards.sort((a, b) => stringCompare(a.title || "", b.title || ""));
-
   const deviceCards: LovelaceCardConfig[] = [];
 
-  for (const [deviceId, deviceEntities] of Object.entries(
+  const sortedDevices = Object.entries(
     splittedByAreaDevice.devicesWithEntities
-  )) {
+  ).sort((a, b) => {
+    const deviceA = deviceEntries[a[0]];
+    const deviceB = deviceEntries[b[0]];
+    return stringCompare(
+      deviceA.name_by_user || deviceA.name || "",
+      deviceB.name_by_user || deviceB.name || ""
+    );
+  });
+
+  for (const [deviceId, deviceEntities] of sortedDevices) {
     const device = deviceEntries[deviceId];
     deviceCards.push(
       ...computeCards(
@@ -534,8 +547,6 @@ export const generateDefaultViewConfig = (
     );
   }
 
-  deviceCards.sort((a, b) => stringCompare(a.title || "", b.title || ""));
-
   let energyCard: LovelaceCardConfig | undefined;
 
   if (energyPrefs) {