feat: add unit display to smart home entitiy card (#1844)

Unit of measurement can be chosen to display on the entity card.
Friendly name can be used instead of displayName.

public/locales/en/modules/smart-home/entity-state.json

@@ -9,12 +9,20 @@
                 "label": "Entity ID",
                 "info": "Unique entity ID in Home Assistant. Copy by clicking on entity > Click on cog icon > Click on copy button at 'Entity ID'. Some custom entities may not be supported."
             },
+            "appendUnit": {
+                "label": "Append unit of measurement",
+                "info": "Append the unit of measurement attribute to the entity state."
+            },
             "automationId": {
                 "label": "Optional automation ID",
                 "info": "Your unique automation ID. Always starts with automation.XXXXX. If not set, widget will not be clickable and only display state. After click, entity state will be refreshed."
             },
             "displayName": {
                 "label": "Display name"
+            },
+            "displayFriendlyName": {
+                "label": "Display friendly name",
+                "info": "Display friendly name from Home Assistant instead instead of display name"
             }
         }
     }

src/widgets/smart-home/entity-state/entity-state.widget.tsx

@@ -16,6 +16,11 @@ const definition = defineWidget({
       defaultValue: 'sun.sun',
       info: true,
     },
+    appendUnit: {
+      type: 'switch',
+      defaultValue: false,
+      info: true,
+    },
     automationId: {
       type: 'text',
       info: true,
@@ -25,6 +30,11 @@ const definition = defineWidget({
       type: 'text',
       defaultValue: 'Sun',
     },
+    displayFriendlyName: {
+      type: 'switch',
+      defaultValue: false,
+      info: true,
+    },
   },
   gridstack: {
     minWidth: 1,
@@ -58,6 +68,14 @@ function EntityStateTile({ widget }: SmartHomeEntityStateWidgetProps) {
       },
     );
 
+  const attribute = (widget.properties.appendUnit && data?.attributes.unit_of_measurement ?
+    " " + data?.attributes.unit_of_measurement : ""
+  )
+
+  const displayName = (widget.properties.displayFriendlyName && data?.attributes.friendly_name ?
+    data?.attributes.friendly_name : widget.properties.displayName
+  )
+
   const { mutateAsync: mutateTriggerAutomationAsync } = api.smartHomeEntityState.triggerAutomation.useMutation({
     onSuccess: () => {
       void utils.smartHomeEntityState.invalidate();
@@ -101,6 +119,7 @@ function EntityStateTile({ widget }: SmartHomeEntityStateWidgetProps) {
     dataComponent = (
       <Text align="center">
         {data?.state}
+        {attribute}
         {isLoading && <Loader ml="xs" size={10} />}
       </Text>
     );
@@ -118,7 +137,7 @@ function EntityStateTile({ widget }: SmartHomeEntityStateWidgetProps) {
       w="100%">
       <Stack align="center" spacing={3}>
         <Text align="center" weight="bold" size="lg">
-          {widget.properties.displayName}
+          {displayName}
         </Text>
         {dataComponent}
       </Stack>