Add Matter status to config dashboard

[TheJulianJES]

Proposed change

This PR aligns the Matter config dashboard with the ZHA and Z-Wave one:

• The Matter page now shows an info box at the top. It shows:
  • how many Matter devices are connected
  • if the Matter integration is loaded successfully or not
• The text on Matter being in an experimental state is removed.
• The dashboard is now accessible via the cogwheel on the integrations page, regardless of running dev.
• The shortcut in the settings menu for Matter is added back.
• An issue is fixed where the "Visit Thread panel" button in the top right corner was only shown when the otbr integration was present, even though it's the config panel for the normal thread integration.
• The developer tools were put into a collapsible section.

Do keep in mind that I'm not a frontend dev and this was mostly done by Claude, so bear with me on this PR. It might need a ton of feedback. 😄

There are some questions on potential changes below the screenshots as well.

Screenshots

Matter integration page with Matter integration being loaded successfully and opened developer tools section:

and with the Matter integration not loaded successfully or disabled and developer tools being collapsed (default):

Questions

The PR is already good in the current state IMO, but for follow-up tweaks to this dashboard, I have a couple of potential questions or changes that could be made:

1. I'm still unsure about the button layout for the developer tools. I've put them into a grid now, but see the section below the questions for some screenshots with other alternatives.
2. Is it fine to keep the developer tools on this page? Or should we hide them on another page? In an overflow-menu (where)? Only show if running dev or nightlies?
3. Is it fine to keep the "Visit Thread Panel" button in the top right corner? Or should we move it to a box in the top box or a new one? Or just remove it entirely?
4. A future PR can also align the ZHA and Z-Wave pages a bit more, e.g. on the left/right-aligned button layout.
   Bluetooth, ZHA, and Matter page use a right-aligned button layout inside the cards. Z-Wave mostly uses left-aligned buttons. So, I'd align the Z-Wave one to be right-aligned too for the buttons inside the card. Or should we go with left-aligned for all?
5. This was just a random thought and related to question 3:
   The other pages have a tab layout at the top. I don't think there is anything we can put for Matter here, for now. We may be able to add "Groups" in the future. But would it make sense to have Matter and Thread as tabs, as they're closely related? Probably not, right?
6. Some more general idea: Z-Wave has a diagnostics card/section with the Z-Wave JS version that's running and so on. We should also be able to do this for Matter if we expose the relevant details via the websocket API in Core. Is this something we want? I don't think there's much more than the Python Matter server / Matter.js version and websocket URL (most likely pointing to the addon) that we can show.
7. It might be possible for the Matter integration to have multiple instances (why?). For now, only the first one is used to calculate the status and link the Matter devices, similar to ZHA. The Matter websocket API for dev-tools also doesn't accept a config entry id.
   I'm not 100% sure about this, but I at least see the option to "Add hub" on the Matter integration page and it gives me the dialog on whether I want to use the "Use the official Matter Server Supervisor add-on" (which I am already, so not sure how this would work, I can try on another instances later).
   IMO, it's fine to only use the first config entry for Matter now, as I don't see any real use-case for having multiple Matter integrations (assuming it's even possible and the flow doesn't just break/cancel later). It's not like you can install the Matter addon multiple times, sooo...
   So, fine to keep it like this or should we add the config entry picker used for Z-Wave to Matter as well?

Different button layout screenshots

Different button layouts (CLICK TO EXPAND)

Grid (current state of PR):

All in one row with button text wrapped:

Button text in full length, wrapped to next page:

List:

... and I've just realized we'll show the "Commission device with mobile app" when accessing this page from Android/iOS apps. We can likely just remove that button entirely though, since you can also get to that via the normal "Add device" button. It looks like this with the grid layout (probably not great):

So, what's the best way we can layout these buttons? (Or is that grid fine, since it's "good enough" for a dev section?)

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[TheJulianJES]

Marked as ready for review now. This is something that works and we could include now as is IMO.
The questions in the PR description aren’t critical and are just for streamlining the pages, which can also be done later.