Rearrange/Reorder - Widgets and Categories

[jelliuk]

Description

It would be useful to have some control to the ordering of Widgets and Categories. At the moment the ordering in Homarr doesn't appear to follow any logical setup either user defined or alphabetical (A-Z). (Maybe this was the order I added services but I can't recall?)

For example, my Dashboard now has the following categories in the below order:

• Media
• Security
• Management
• Home
• Network
• Your downloads

I'd prefer to have some control over the categories so that I can bring the important/commonly used elements to the top of the page.

The same is true for Widgets, currently the following order appears to be hard-coded or defined in someway with no option to customise:

• Calendar
• Weather
• Download Speed
• Date

I think I've noted other queries about Drag and Drop (i.e. between categories for services) so aware that I think this might be on some roadmap for eventual development but wanted to note a request.

Priority

Low (Nice-to-have)

Please tick the boxes

• [X] You've read the docs
• [X] You've checked for duplicate issues

[ajnart]

Thanks for the issue! I think module apparition could be reordered but it might be really hard 😅 Categories reordering is based on the apparition of the category in your config file. I don't know how to implement it but I will think about it. Main priorities are new integrations like Docker and Overseerr at the moment :)

[jelliuk]

Ah I see, so based on the order of first appearance in the JSON config file for the category type defines effectively the order in which they appear in Homaar. I would therefore take a bet that it's effectively the order by which I created/defined the services originally since that would populate the config file.

Having that knowledge, I just edited the config.json manually and moved some of the service definitions and that's now allowed me to re-order the categories effectively. Slightly hacky but achieved the outcome I was seeking.

Anyone reading this, please backup/download your config before manually editing if you do want to take this approach.

[SurvivaLlama]

It would be really cool if I could drag and drop the categories... Just like the icons inside the categories. Or if I could just choose an option to have everything align in alphabetic mode.

[ajnart]

It would be really cool if I could drag and drop the categories... Just like the icons inside the categories. Or if I could just choose an option to have everything align in alphabetic mode.

It would be really cool. Ideally you could put anything anywhere on the screen. But i have no idea how to do it technically

[realitymolder]

It would be really cool if I could drag and drop the categories... Just like the icons inside the categories. Or if I could just choose an option to have everything align in alphabetic mode.

It would be really cool. Ideally you could put anything anywhere on the screen. But i have no idea how to do it technically

What if you will have an array list of order [0-5] the lower number will be the top and the higher will be the bottom, so the list of widgets will sync with it? Won't it work?

[ajnart]

It would be really cool if I could drag and drop the categories... Just like the icons inside the categories. Or if I could just choose an option to have everything align in alphabetic mode.

It would be really cool. Ideally you could put anything anywhere on the screen. But i have no idea how to do it technically

What if you will have an array list of order [0-5] the lower number will be the top and the higher will be the bottom, so the list of widgets will sync with it? Won't it work?

If you look at the config file you can see how services are saved. I might do a new section in the config like arrangment and then split it into categories, with each item represented by their ID inside, but to achieve this I need to make a temporary migration script

config.json

"arrangment": {
  "social medias": ["id-social-stuff", "id-another-one"],
  "other": ["other-service", ".."]
}

What do you think about that ?

[sho-87]

in terms of reordering categories, the cleanest solution would be to do it in the same way that you currently reorder individual cards, where you can do it directly from the home page. but if thats too technically difficult, you could also add an orderable list to the Settings panel like this:

I guess you would then have to add an arrangement section to store the order of category IDs to config.json, and tag each individual app with the category id

[ajnart]

The problem is not making the actual categories boxes move, it's more of how to read / write the data but thanks for your input !

[dinghino]

Thanks for the issue! I think module apparition could be reordered but it might be really hard 😅 Categories reordering is based on the apparition of the category in your config file. I don't know how to implement it but I will think about it. Main priorities are new integrations like Docker and Overseerr at the moment :)

Since you guys are using mantine - which i fell in love with - there's these neat example in the demos for drag and drop using react-beautiful-dnd.

First solution that comes to mind is to save an extra array in the configuration with the categories' names, use that to sort them out on the UI, and when you drag and drop simply save back the new order. As you stated you could also use the same arrangement property to save both the categories order as well as the items inside, with something like {arrangements: [ [<category>,[<item-[id/name]>,...] ]} so it's even easy to iterate over consistently