feat(server-routes): group routes by type

[arashsheyda]

showing server-rotues from other modules in external group
related to #252

With routes from other modules

without

[arashsheyda]

not sure if this was the best way to do it, sorry

[antfu]

Can you help to set up a new playground for routes with an example of external routes under /playgrounds? It looks good but I am not sure I understand the concept of "external" routes, and if they are worth to put in a separate group. Thanks

[arashsheyda]

@antfu sure! thank you

[antfu]

I see. I guess external might be a bit confusing. Ideally, they are more like "contributed by module", or "added dynamically". I think we need a better term.

Also, why do you think they should be separated by group? I feel the groups are taking a bit too much space. Maybe using checkboxes like we did for components graph?

[arashsheyda]

@antfu yes it's taking a lot of space 😄 what about something like this? Maybe we could add the ability of seperation by group to user, so they can drag and create custom groups for themselves?

and also having the checkbox option too, looks very good thank you

[antfu]

Oh yeah, that looks much better indeed. Feel free to push it :)

[arashsheyda]

@antfu sure! Thanks

[arashsheyda]

@antfu here is a demo with latest push
the code may want refactoring, sorry and thank you

storage-options.mp4

[antfu]

No need to sorry at all! Thanks a lot for your efforts on pushing many features of DevTools!

It's really impressive you implemented the grouping and dragging system! But I am not very sure if it can be very useful as it requires manually managing them (and also the configure is save locally that are not shared across the team).

I thought we could the grouping automatically based on the directories (like a tree view) so they can manage the groups by simply managing the file structure. Users may toggle between plain list or tree views as well.

[arashsheyda]

@antfu yes that make sense thanks :D, can you do the grouping automatically based on the directories whenever you have the time?(Sorry I don'thave access to computer for a couple of weeks) :)

and do you think is it too much to have a nuxt-cloud(an space for caching & stuff) for teams to sync their configs and etc. ?

[arashsheyda]

here is a demo with grouping automatically based on the directories, @antfu what do you think :D thank you

2023-06-17.18-57-44-331.mp4

[arashsheyda]

also is it a good idea to have color for collections?

[antfu]

I love the UI and the grouping you made! But I am a bit hesitant about the breaking changes made to the UI options. I extracted nitro part #286 and merged it first so we are not blocked by this.

About the grouping and dragging, do you find a use case that you will need to manually organize the groups? I think we could auto-infer based on the routes structure. So user only needs to organize the routes by the file structure, which becomes the single source of trust. We could put the runtime in a separate group.

As for coloring, for DevTools I am thinking of not making it too colorful unless it has some meaning. But maybe changing the icon based on the type of API might be interesting.

[arashsheyda]

@antfu oh thank you, no I removed the dragging and used auto-grouping based on the routes name, in the last video, it is auto-grouping by the route's name

[antfu]

Is it possible to keep the UI options as-is? If we absolutely need that, we could discuss it in another PR.

[arashsheyda]

@antfu awww sorry I misunderstood, I got it now. Sure, thank you