Added optional boxed styling for information widgets and refactored information widgets

[denispapec]

Proposed change

Related to #1366 and creating a new PR since last one can't be opened.

I've pushed further changes to my branch and rebased the code to (almost) latest main branch, including the enhanced glances added in #1534 in mean time.

I agree about refactoring the widgets btw, I did already error component at that time as I've had issue to have unified widget style with error even at that point. The option now lives in settings.yaml.

My latest changes include all those widget refactored to shared components (to everything what makes sense to have), except for Kubernetes, Longhorn, Unifi widget as they don't follow any shared style (except for the wrapping Container component). Also, as I don't use these 3 technologies, I've faked API response to test. For completeness, here is screenshot with all widgets, having different states:

And a screenshot of an real life example:

Thanks for this great homepage!

Type of change

• New service widget
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Other: Reimplemention of information widgets

Checklist:

• If adding a service widget or a change that requires it, I have added a corresponding PR to the documentation here:
• If adding a new widget I have reviewed the guidelines.
• If applicable, I have checked that all tests pass with e.g. pnpm lint.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.

[benphelps]

Looks good to me, thank you.

[shamoon]

Darn, I hadn't had the chance to test this myself, but it seems to break my layout, presumably others.

before:

after:

Here's another screenshot of the differences:

[shamoon]

@denispapec sorry to say but we're going to revert this merge for now, rather than try to suss out all of the issues (and prevent any releases). If you can correct the issues we can of course readdress this PR.

1. This should not change people's existing layouts, at all, or at least barely. I think the screenshots above are due to lots of little margin changes etc. One of the challenges of this refactor is that there are some subtle differences in the widgets as-is so its hard to generalize them into reusable components (totally possible, just a lot of work, as you have found) and I suspect certain things got lost. I dont think it will necessarily be a ton of work to fix this.
2. The glances widget seems to have broken disks. This might be a simple thing but a large refactor like this needs to be very careful about not breaking things. Its obviously not easy to test every thing in every widget, but...

Again, maybe this won't be so much to fix but lets sort it out before (re-) merge

[denispapec]

Hi @shamoon, no worries, I'm glad this was caught before it was released.

1. I agree. There were indeed added some subtle changes but they affected more than expected 😅 , now in new PR it uses all old style for other header styles.
2. Oops, didn't notice that one. Thanks, yeah, that's why I've added a screenshot with every single widget, with every possible thing in it, just to avoid this as much as possible. :)

Fixes are now in #1603.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns.