More precise name handling for auto-generated dashboards (#8289)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -184,7 +184,7 @@ export const computeCards = (
         (name = computeStateName(stateObj)).startsWith(titlePrefix)
           ? {
               entity: entityId,
-              name: name.substr(titlePrefix.length),
+              name: adjustName(name.substr(titlePrefix.length)),
             }
           : entityId;
 
@@ -203,6 +203,18 @@ export const computeCards = (
   return cards;
 };
 
+const hasUpperCase = (str: string): boolean => {
+  return str.toLowerCase() !== str;
+};
+
+const adjustName = (name: string): string => {
+  // If first word already has an upper case letter (e.g. from brand name)
+  // leave as-is, otherwise capitalize the first word.
+  return hasUpperCase(name.substr(0, name.indexOf(" ")))
+    ? name
+    : name[0].toUpperCase() + name.slice(1);
+};
+
 const computeDefaultViewStates = (
   entities: HassEntities,
   entityEntries: EntityRegistryEntry[]

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -173,9 +173,6 @@ class HuiGenericEntityRow extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .info::first-letter {
-        text-transform: uppercase;
-      }
       .flex ::slotted(*) {
         margin-left: 8px;
         min-width: 0;