[Feature Request] Backpacks Regrouping Elements and Combining Status

[Lukylix]

Description

🔖 Hi, folks! I'm excited to propose a feature that could enhance the organization and functionality of the homepage.
Having backpacks that can regroup elements and combine their status into one when collapsed.
This would provide a neat and efficient way for users to manage their content.

Do not mind other additions.

If you find this idea intriguing, please upvote this post and let's discuss the potential implementation together!

Other

No response

[conanbeach]

would be good for links

[Lukylix]

Don't know if my code will fit in the newer versions. As I did modify the layout on many occasions.

[mgrimace]

Hey, for what it's worth, I love the idea off grouping items. I see this useful for links as @conanbeach mentioned. Also, for docker services that don't have (or need) widgets displayed, for example to quickly see their status at a glance without using up so much screen space.

For example, I use docker-gc (a cleanup/maintenance container) on a few separate proxmox LXCs, and would love to just collect them all into a smaller box so I can just see if they're still running.

For my use, I would not need or use the collapse-into-an-icon function (i.e., if it's easier to code the widget without it). For me, it would mess up my visual arrangement and could potentially be solved with in-built header/group hiding function.

tl;dr a box to collect multiple items (links, services) that can display status/ping would be phenomenal

[ForsakenRei]

Would you mind me asking how you make the last row?

[mgrimace]

Not the question asker or the OP, but I tested and wasn't able to get this working.

• I started with 5 basic services in a block in services.yaml: no names, just icon, href, and dot status
• In settings, I set the group as a row with 5,7, and 10 columns (tested a few to try and 'shrink' the services to squares).

Nothing gets them squared or centered. I'm thinking that might be a custom thing the OP created.

[Lukylix]

This is a custom implementation.
I started a thread but the title isn't wisely chosen and hard to find x)
The services collapse to a single icon and on hover expand to show the title.
I called this layout auto-row-centered for some reasons.
The "full" at the end is to ignore main columns and take the full space available.

#1677

My settings.yml
Include custom code for some functionalities even if some like the status dot got implemented in another way.
(my code is 3 month old)

status:
  type: dot-outline #custom
layout:
  1:
  2:
  3:
  4:
  5:
  6:
    style: auto-row-center-full #custom
main:
  position: bottom #custom
  columns: 4
background:
  video: wallpaper.mp4 #custom
backpacks: #custom
  My Sites:
    icon: /backpack64.png
    columns: 2
    widthRatio: 3/12

My services.yml

- 1:
   {...some services}
- 2:
   {...some services}
- 3:
   {...some services}
- 4:
   {...some services}
- 6:
    - Code Server:
        icon: vscode
        href: https://code.example.com
        server: my-docker
        container: code-server
    - Snippet Box:
        icon: snippetbox
        href: https://snippet.example.com
        server: my-docker
        container: snippet-box
    - Jenkins:
        icon: jenkins
        href: https://jenkins.example.com
        server: my-docker
        container: jenkins
    - Teleport:
        href: https://ssh.example.com
        icon: teleport
        server: my-docker
        container: teleport
    - Duplicati:
        href: https://duplicati.example.com
        icon: duplicati.png
        server: my-docker
        container: duplicati
    - Plausible:
        href: https://plausible.example.com
        icon: plausible
        server: my-docker
        container: plausible-plausible-1
    - Pterodactyl:
        href: https://game.example.com
        icon: pterodactyl
        server: my-docker
        container: pterodactyl

[Lukylix]

Thank you, I had no idea you could hide the service title with - "":, that's great to know

Didn't know they also implemented this change. Great !
In my code to hide a name give a number value.
Why number value instead of "". Because i can reference the column number in settings layout option.
Discussion for hidden group names:
#1681

[mgrimace]

That's a really neat solution, and I'd love to see this implemented (I voted in the original thread that you linked). My thoughts, for what it's worth, would be to separate the shape from the alignment if possible.

For example.

layout:
  1:
  2:
  3:
  4:
  5:
  6:
    shape: square
    style: centered

That might alleviate some of the confusion given this is really doing two thing. That way, folks could also have either one or both options per group if they wanted. To add, I'd suggest rather than style going with justification and include left, right, or centered as options. Adding the 'shape' category might also open the door for specifying other standard service shapes (e.g., 1x1, 2x2, 4x1, etc.)

[Lukylix]

This is a great solution and less confusing than mine.

I based my code to use the existing layout style property (With currently 2 styles column or row available).

Here is the list of possible layouts i added:

• auto-row: This style displays only the services icon, without any specific alignment. (Left)
• auto-row-center: Services icons are centered within their respective sections.
• auto-row-full: The group is displayed, taking up the full width of the row.
• auto-row-center-full: This style centers the services icons and makes the group take up the full width of the row.
• grid-combine: An alternative to the classic column style but allow for nested grid definition. Children of grid will be passed to the next sibling.
• grid-preserve: An alternative to the classic column style but allow for nested grid definition. Children of grid will not be passed to the next sibling grid.

See my old pull request for grid-combine && grid-preserve screenshots.
#1662 (comment)
We will continue on the other thread i will copy my reply.

[mgrimace]

Thank you, I had no idea you could hide the service title with - "":, that's great to know

Didn't know they also implemented this change. Great ! In my code to hide a name give a number value. Why number value instead of "". Because i can reference the column number in settings layout option. Discussion for hidden group names: #1681

Ah, it's possible I used the wrong words and I might not be saying the same thing as what you're thinking, what I mean

- Calendar # group title
       - "" #blank service title
           widget:...

I was able to hide the service title using the "" but I didn't attempt to hide the 'group' title, which I think is what you're suggesting in #1681 - at least that's how I'm reading it.

I can however hide the group titles in settings.yaml using header: false, for example:

layout:
# Top of every page
  Glances:
    style: row
    columns: 4
    header: false #this hides the group title 'Glances', but not the individual titles for each service within the group

My apologies for any confusion

[Lukylix]

You are right i did not read properly ^^.
This option may work i wasn't aware of it. Thanks !