I use Home Assistant for years now and even succeeded with a reasonable WAF my minimizing the UI elements as much as possible. However, it becomes a bit outdated. So I started experimenting with mushroom, bubble card, minimalist and tile cards. Fun stuff but a lot of inconsistency and css fiddling. The power of my old UI is that it is very compact. The principle is that each room has a lights, heating, ventilation and others when available in the same order. See example below:
Each group can be expanded using the wonderfull lovelace-fold-entity-row like this:
Same goes for heating like this:
Now, I like to make this a bit more fancy and less textual. For example using bubble cards:
But that what quit a lot of custom css work per element and difficult to make it consistent in both dark and light mode. So I tried simply tile cards:
Nice these buttons with icons, but they are big and I can’t collapse them. I have a lot of switches and elements, if it can’t be collapsed it will end up in an endless and complex list, while most of the times people just switch on or of the lights by the switch that is closest to the door. Not good for the WAF.
In order to come close to the unfolding magic, I experimented with hiding and un-hiding them using a toggle in a tile, but it is still not as handy and compact as the old UI. It ends up in having multiple tiles per room and as soon as you expand them you need some means of collapsing them. In fact I found myself emulation the fold-entity row!
Therefore I decided to try another path by using paper-buttons-row combined with the good old fold-entity row in sections (one section for a room). This is what I got and that comes close to what I think is good enough in order to safeguard the WAF:
Notice the two toggles on the bottom: they are also present in the old UI and are used to turn on/of the automation (turning features of is the first thing your wife will ask for) and configure the automation conditions. This is reflected in the header icon like this:
Now I want to add the settings. These where grouped for lights in all rooms and heat in all rooms in the old UI like this:
However that turned out to be much too complex. So now want to present only the relevnt settings on some kind of pop-up card. I succeeded a bit by using a vertical stack, so I could add some cards to the same section and hide or unhide them. Used a input bool for the wrench symbol to make it visible or hide it like this:
Almost there. But now, Since this is a card, it is not part of the fold-entity-row. Once it is made visible by toggling the wrench, it stays visible.
Has anyone a good idea how to toggle the wrench again as soon as the fold-entity-row becomes collapsed? Also I am looking how to disable the inner borders…