Improvements to the UX for the grid indicator.

[xservers-si]

Improvements to the UX for the grid indicator:

Current layout with and without battery:

Proposal for a new layout:

1.a. Move the grid indicator to the right:

• Reposition the grid indicator to a suitable amount on the right.
• This would free up some vertical space for additional optional labels.

1.b. Icon and values in circle:

• Move all the values and the icon into the circle.
• This would logically and visually group the grid indicator.

1.c. Show usage percentage as an arc:

• Use the circle as an indicator of the percentage of total available power with an arc if the additional entity 'max_grid_power' is defined.
• Define the arc colour.

1.d. Split labels and positioning:

• Existing labels on the grid root level are retained.
• They are moved to the left of the circular home indicator at the 'common labels' position.
• Add labels on (if defined):
  • Import_Entity Level: Position them on top of the circled home indicator as shown.
  • On the export_entity level, position them at the bottom of the circled home indicator as shown.
• If import_entity and export_entity are not defined, more vertical space is available for common labels.

1.e. Consume space in the middle of card for clarity (this space is now wasted).