HA UI: A single webpage with tabs for Integrations + Devices + Entities + Automations + Scripts + Helpers please (if advanced mode is on)

Feature Requests
1

I find that SO much of the “boilerplate” mouse clicking actions I take when working with Home Assistant is constantly having to go back to the settings menu to open the “other” tab. I.e. if I’m looking at entities and suddenly need to look at automations I need to go back and click more. OR I need to keep more tabs open but I dislike that because it adds to an already bloated set of tabs required to do work on HA.

I understand the original intent to split things out by semantics but in practice the usage pattern of (perhaps advanced?) users requires constant access to both of those menus.

Having access to all of those tabs from a single web page will probably reduce all the clicking I do by a 20%. And I just made that up, but it’s a lot.

image
image896×220 12.3 KB

2

Open a second or third window in the browser?

Screenshot_20240528_104053
Screenshot_20240528_104053792×109 34.1 KB

3

I acknowledged that solution in my post.
It adds to an already crowded set of tabs AND requires flipping between tabs. Perhaps I should be more obvious why I don’t like this solution.

1 Like
4

Yeah people often comment on the fact that I have so many tabs. First world problems :sob:

1 Like
5

I get the problem, as I had the same one, although I think in the end you’d walk into every user having different needs/tabs they access often.

I made my own shortcut dashboard using button card templates.

image
image823×222 11.6 KB

If you want to use them, this is the template for button card that goes in the raw dashboard config:

Template Code 
button_card_templates:
  dashboard_link_card:
    variables:
      var_title: A title
      var_icon: mdi:nuke
      icon_margin: 0%
      icon_size: 37.5%
      bubble_color: steelblue
      nav_path: lovelace-test/dashboards-links
    custom_fields:
      card_bubble: |
        [[[  return `<ha-icon
            icon="${variables.var_icon}"
            style="height: ${variables.icon_size}; margin-bottom: ${variables.icon_margin};">
            </ha-icon><p><span style="font-size: 5em; font-weight: bold;">${variables.var_title}</span>`
        ]]]
    styles:
      custom_fields:
        card_bubble:
          - background-color: '[[[ return variables.bubble_color ]]]'
          - border-radius: 50%
          - position: absolute
          - left: 0%
          - top: 10%
          - height: 190%
          - width: 100%
          - font-size: 8px
          - line-height: 20px
          - icon: mdi:nuke
    icon: mdi:nuke
    name: test
    tap_action:
      action: navigate
      navigation_path: '[[[ return variables.nav_path ]]]'

And the cards are added via

type: custom:button-card
template: dashboard_link_card
variables:
  var_title: Integrations
  var_icon: mdi:devices
  bubble_color: '#47b16f'
  nav_path: /config/integrations
1 Like