Refactor settings to their own tabs and routes

[MaxLeiter]

This seems pretty controversial from some discussion on IRC, but I like it so I'll leave it up for discussion here before closing it.

See #4489 (comment) for updated screenshots

screenshots:

I also split each tab into its own component and route, as the Settings.vue file is 600+ lines long.

While the settings aren't too complex right now, this allows us more flexibility to add more without worrying about clutter + we can add more tabs for features like custom keybinds.

[itsjohncs]

I like the use of text + icons much more than just icons. It is less aesthetically pleasing but (I think) much more useable. We can do some more passes over the aesthetics after landing too.

As I said on IRC, I don't think the settings page has enough in it to benefit from this. Since separating them out into separate pages that you need to explore makes them slower to look through I think this isn't a net positive. On a meaty desktop or tablet screen I feel like this is particularly true.

I'm also hesitant to encourage the proliferation of settings since I think each additional setting comes with drawbacks that need to be weighed.

But all that said, I don't really have a big problem with this change and it seemed like a few people were excited about it at least. So I won't fuss if people generally want to go through with it.

Making all the pages visible at once (perhaps allowing quick jumping between them using a sidebar) on large screens would alleviate my first concern too. That could be done after this change lands easily enough.

I can do a proper review after we arrive at consensus about what we're doing, but some quick thoughts I wanted to jot down so I don't lose them:

• Autocomplete doesn't seem like it belongs under appearance.
• "Account" might be a more widely-intuitive category title than "User Settings".

[MaxLeiter]

@itsjohncs:

...separating them out into separate pages that you need to explore makes them slower to look through I think this isn't a net positive

This is true if you know what you're looking for, but I'd argue the tabbed system is easier for newer users. Four options is not that many to consider, I think it's pretty obvious what setting should be where. Scrolling through and reading a long list (and I do feel like our settings page is long) is a lot of work.

I'm also hesitant to encourage the proliferation of settings since I think each additional setting comes with drawbacks that need to be weighed.

Agreed, but I do think there are valuable options this allows us to now explore, like admin settings, upload management, etc.

Autocomplete doesn't seem like it belongs under appearance.

This isn't really new -- autocomplete has always been under the "Visual aids" section. Where do you think it should be instead? General?

"Account" might be a more widely-intuitive category title than "User Settings".

Thanks, I was struggling to think of a better name last night 😅

[MaxLeiter]

[MaxLeiter]

Worth pointing out that #85 and @astorije's (5 year old) mock-up of better settings exists at https://fishmonger-christopher-73101.netlify.app/.

[GewoonYorick]

Very welcome change, Opens up the door to a lot of new possibilities and gets rid of long list of settings.

Personally I feel like it'd be nicer to have the navigator on the side (and not ontop) on wider screens atleast.

Currently the navigator (selected item) looks a little off on the default theme:

[MaxLeiter]

@GewoonYorick I hadn't tested on non-morning yet, oops. Thanks!

I'll play around with larger screens, but the issue is that it breaks our consistency with other pages (connect and help)

[MaxLeiter]

Updated to @GewoonYorick's suggestion of nav on the side on desktop + fixed the background color

Screenshots (click to expand)

[aab12345]

Side menu much better, need to see what it looks like on a mobile with there been less space to work with.

[itsjohncs]

Haha the changed files view on GitHub scared me. Fortunately most of the lines have just been moved from one file to another. I used this to get a nicer diff:

git diff $(git merge-base HEAD master) --color-moved=plain --color-moved-ws=ignore-space-change

There's not much actual new/changed code in here which is great. I think we could probably spend some time polishing the styling (like on mobile there's not enough to contrast the tabs from the rest of the content so they're easy to miss), but I think it's worthwhile to just push this through and do any polishing as much-much smaller PRs.

I only found one thing that needs fixing. I didn't do super extensive testing on this but I'm hoping that since very little actual JS has changed we won't have any nasty surprises.

[itsjohncs]

LGTM!