Add support for Layouts (UI)

[Martinsos]

Allows users to define "Layouts" -> imagine you want all the pages to have the same layour (navbar, bar on the side, ...). You would want that to be ideally specified in one place for all of these pages. Right now the way to do it is to define your own React component that is a layout and then to manually wrap every page in React into it. It would be cool if you could just give it to Wasp and tell it to wrap all the pages. We could maybe specify it by route? Wrap all the pages under some route. This yet has to be investigated by this is general direction.

@breadchris mentioned this would be useful! https://discord.com/channels/686873244791210014/1065447861472481312/1067491187822428201

[infomiho]

What if we had something like this in Wasp file:

route HomeRoute { path: "/", to: MainPage }
page MainPage {
  authRequired: true,
  layout: DefaultLayout,
  component: import Main from "@client/pages/Main"
}
layout DefaultLayout {
  component: import DefaultLayout from "@client/layouts/DefaultLayout"
}

and then under the hood it's implemented like:

<Route
  exact
  path="/"
  component={ withLayout(DefaultLayout, createAuthRequiredPage(MainPage)) }
/>

[Martinsos]

I think something like that could work!

We had a bit of discussion about this on Discord: https://discord.com/channels/686873244791210014/1065447861472481312/1072212984211984487 .

I think it is important to recognize use cases, how it is normally used.

Often one will want to have default layout, but then have a couple of pages that are exempt from it. Of maybe a couple of layouts, for different groups of pages, and then again some without layout.

Achieving that by defining a layout for every page individually might be a bit cumbersome, since I could have then wrapped each of them in that layout in React code.

So what might make sense is if we would be able to define layouts for groups of pages. Something like

layout MyLayout {
  component: <ExtImport>,
  applyToPages: [Page] | regex,
  dontApplyToPages: [Page] | regex
  applyToRoutes: [Route] | regex,
  dontApplyToRoutes: [Route] | regex
}

Ok I went a bit over the board here, since I am not sure if layouts should target routes or pages, it probably shouldn't go with both but just with pages or just with routes, but this is just to give an idea.

That said, the whole Wasp's system or Route / Page is also something that could be possibly improved, routing is now very basic and only top-level, no parameters, ... . Not sure if that would be worth reconsiderning here also or not -> probably best not since it is a bit much, but might be good to think about it for a sec.

[infomiho]

One thing we can do to combat the tiresome writing of DefaultLayout too many times is probably offering a defaultLayout prop on app or something like that.

But that's great for cases where you have 99% one layout, and 1% is the exception. What about cases where the split is more like 50% and 50% (public pages and admin panel) then it's not that great, and you still need to add the layout to all of them.

One solution could be if we decide to allow some nesting with the routes:

route App {
  layout: DefaultLayout,
  route Homepage {}
  route Profile {}
}
route Admin {
  layout: AdminLayout,
  route Login {}
  route Users {}
}

[Martinsos]

Well I think it can be addressed the way I described it above, so you would have something like:

layout DashboardLayout {
  component: ...,
  pages: /app/*
}

layout BlogLayout {
  component: ...,
  pages: /blog/*
}

But, this is all addressing only top level pages, because that is all we have currently, top level pages and routes. That is why I mentioned that it might be also interesting to think about expanding that into something more complex. I think the nesting you did there goes in that direction. We should probably look what others are doing and what people like.

[Martinsos]

Btw now we have top level component, so that helps somewhat. But is still not a complete replacement for this.

[Martinsos]

What is also interesting here and somewhat related is the potential of grouping routes. @Fecony touches both on layouts and routes grouping here, in this GH discussion: https://github.com/wasp-lang/wasp/discussions/1199 .

[sodic]

Users requesting this: https://discord.com/channels/686873244791210014/1289896219753189480/1289896219753189480