Sub columns for services

[Lukylix]

Proposed change

Add the ability to have sub-columns services.
The key number indicate the number of sub-columns.

---
# For configuration options and examples, please see:
# https://gethomepage.dev/en/configs/services

- 1:
    - Proxmox:
        icon: proxmox
        href: https://proxmox.exemple.com
        widget:
          type: proxmox
          url: https://proxmox.exemple.com
          username: api-homelab@pam!homelab
          password: secret
    - Portainer:
        href: https://portainer.exemple.com/
        icon: portainer.png
        widget:
          type: portainer
          url: https://portainer.exemple.com
          env: 2
          key: secret
    - Pterodactyl:
        href: https://game.exemple.com
        icon: pterodactyl
        widget:
          type: pterodactyl
          url: https://game.exemple.com
          key: secret
    - Speedtest Tracker:
        icon: speedtest-tracker.png
        href: https://speedtest.exemple.com
        widget:
          type: speedtest
          url: https://speedtest.exemple.com

- 2:
    - TrueNas:
        href: https://truenas.exemple.com
        icon: truenas.png
        widget:
          type: truenas
          url: https://truenas.exemple.com
          username: root # not required if using api key
          password: secret # not required if using api key
    - Nextcloud:
        href: https://cloud.exemple.com
        icon: nextcloud
        widget:
          type: nextcloud
          url: https://cloud.exemple.com
          key: secret
    - Nginx Proxy Manager:
        href: https://nginx.exemple.com
        icon: nginx-proxy-manager.png
        widget:
          type: npm
          url: http://192.168.1.20:81
          username: [email protected]
          password: secret
    - Uptime Kuma:
        icon: uptime-kuma
        href: https://uptime.exemple.com
        widget:
          type: uptimekuma
          url: http://uptime.exemple.com
          slug: services

- 3:
    - Duplicati:
        href: https://duplicati.exemple.com
        icon: duplicati.png
    - 2:
        - Authentik:
            href: https://auth.exemple.com
            icon: authentik
        - Teleport:
            href: https://ssh.exemple.com
            icon: teleport
        - Code Server:
            icon: vscode
            href: https://code.exemple.com
        - Snippet Box:
            icon: snippetbox
            href: https://snippet.exemple.com
        - Jenkins:
            icon: jenkins
            href: https://jenkins.exemple.com
        - Plausible:
            href: https://plausible.exemple.com
            icon: plausible
    - 3:
        - Portfolio:
            href: https://exemple.com
        - Dashboard:
            href: https://dashboard.exemple.com
        - Argentbank:
            href: https://argentbank.exemple.com
        - Kasa:
            href: https://kasa.exemple.com
        - Sportsee:
            href: https://sportsee.exemple.com
        - Ohmyfood:
            href: https://ohmyfood.exemple.com
        - Booki:
            href: https://booki.exemple.com
        - Lespetitsplats:
            href: https://lespetitsplats.exemple.com
        - Fisheye:
            href: https://fisheye.exemple.com
    - Social:
        href: https://social.exemple.com

Type of change

• New service widget
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Other (please explain)

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.

[Lukylix]

Sorry for my formater 🙄

[benphelps]

This breaks widgets (in a non-graceful way) in the sub columns, which I think most people would expect to keep working.

[Lukylix]

Indeed didn't saw it, i will have a look.

[shamoon]

Yea this is why I would discuss a change like this before PR.

How did you plan to handle service widget layouts with these extremely narrow columns?

[Lukylix]

I was thinking that the user could revert to a less restrictive layout if this one doesn't fit.
What suggestion do you have?
I could maybe incorporate a feature that detects whether the widget will have sufficient space, and if not, display an error message to prompt the user to modify the configuration.
Another option could be to restrict sub-columns for services without a widget.

[Lukylix]

I will probably also need to tweak the sub-columns breakpoints to be more aggressive.

[shamoon]

This feels overly-complicated for a feature that no one seems to have requested... Not really up to me tho

[Lukylix]

I apologize for not noticing your message until after I made my commits.
But, I believe I have achieved a satisfacting state.
The services widget will now wrap if there is insufficient space,
and I have adjusted the breakpoint for services, ensuring a minimum width.

[erikrt]

Just my two cents, I would use this.

[Lukylix]

Nice !
Still working on it it's not perfect for now

[Lukylix]

Service will now also wrap.
There are two layout style option grid-combine (default):

or grid-preserve (name it as you want)

[shamoon]

One small thing is your linter makes this PR hard to look at clearly.

But bigger picture, I appreciate you've put a lot of effort into this but Im not really in favor of merging it. It feels like a lot of work to shoehorn this feature in, it seems to make the code overall less understandable and probably difficult to debug (e.g. https://github.com/benphelps/homepage/pull/1662/files#diff-706cde307938b4f6c07b100f1e1a27af392451424f1cc25ca7c15f8150ed1b5dR86 ) and again, even if there are some people who would use this, I dont think this is a particularly-desired feature and I dont love how service widgets are handled.

Again, not sure its really up to me.

[Lukylix]

I understand,
I also don't consider my implementation particularly elegant, even though I achieved the desired result.

[My-Random-Thoughts]

I could maybe see a use for it, but I think its a niche feature.

My use case would be to list my ESXi hosts under the vCenter management console:

[vCenter Management]
[esx1] [esx2] [esx3]

I could live without it though

[shamoon]

Again, really appreciate the work OP but I think we're going to leave this out for now. Mostly it feels kinda niche for something that requires so many changes (and results in significantly less readable code imho).

In the future perhaps open a discussion before putting so much work into something just so it doesnt end up going un-merged =(

Thanks again

[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 or issue for related concerns.