Improve Device layout for integrations with multiple devices.

[Veldkornet]

As described in home-assistant/core#48820, in the Configuration -> Integrations menu, the Shelly integration shows a list of the Shelly devices connected. When selecting one of those in a list, you get taken to a new screen where it only shows one device. You then need to select this device again, which then shows you a list with only the one device, and you then need to select that again in order to actually see the information that you wanted to see in the first place. If working through multiple devices, you end up clicking back and forth through menus much more than what is needed.
Preferably, this should work as the ZWave-js integration works (for example) where all the devices are available on the top integration.

I understand that Integrations such as Z-Wave JS use a hub (Z-Wave controller). Devices communicate with the HA via this hub, so they are grouped in one config entry. Shelly devices are independent, so they are not grouped.

However at the same time, it seems a bit pointless to click through the menus of the same device multiple times to get to the info.

Current Shelly layout:

1. Top Level Shelly Integration, select a device in the list:
   

2. The integration now shows one device, select the device:
   

3. You are now again shown another list with only 1 device.......
   

Current ZWave-JS layout (example):

1. Example of the Zwave integration which shows all the devices on the top level
   

2. Selecting the devices from the above directly shows all of the devices.