Reorganize JS folder structure to avoid huge folders

[askvortsov1]

Currently, we have several folders with a lot of files in core. components is especially egregious. We might want to split these up a bit, although how exactly we want to do this is up for discussion.

[tankerkiller125]

We could follow a format my work uses (please note that this is normally used for aspx/C# projects so I've made some modifications to fit into the Flarum src style)

So basically components is only shared stuff, and from there things are separated by type.

src
`-- admin
    |-- components
    |   |-- AdminLinkButton.js
    |   |-- AdminNav.js
    |   `-- ...
    |-- utils
    |   `-- ...
    |-- pages
    |   |-- AppearancePage.js
    |   |-- BasicsPage.js
    |   `-- ....
    `-- modals
        |-- AddExtensionModal.js
        |-- EditCustomCssModal.js
        `-- ...

The problem with this style in my opinion is that separates things that are page specific (EditCustomCssModal.js for eg.) another option that I thought up was still separating things out, but keeping page related things together in something like:

src
`-- admin
    |-- components
    |   |-- AdminLinkButton.js
    |   |-- AdminNav.js
    |   `-- ...
    |-- utils
    |   `-- ...
    `-- pages
        |-- Appearance
        |   |-- AppearancePage.js
        |   `-- EditCustomCssModal.js
        `-- Permissions
            |-- PermissionsPage.js
            `-- PermissionsGrid.js

This one makes it so that components are still shared across many pages, except the Modals and other components specfic to pages are kept together with the relevant page via a page folder.

I'm not sure how any of these options effect exports or anything like that and I'm not 100% certain on viability on the forums sections (since I only demonstrated with the admin side)

[dsevillamartin]

We could go with something similar to the 2nd example and simply have categories/sections in the /components folder as well. Something like forum/components/composer for all Composer related stuff.

There will always be some issue with any decision we make 😁

[askvortsov1]

I like David's approach a bit more; we could still use that pattern to group page-related things when stuff is only relevant to one page

[w-4]

If grouping components into separate folders, would it also make sense to include the less files there?

[dsevillamartin]

@w-4 Not really, as the JS and CSS are compiled using completely different methods. LESS is compiled by the PHP, and the JS is compiled by webpack.

[tankerkiller125]

I'm also in favor of David's approach to this. That makes 3 core devs in favor at the moment.