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.

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>