Settings modal

What's included:

• Refactored all settings pages, both user-settings and settings into separate (sub)components
• Consolidated both setting pages into single settings modal. Old pages removed
• Settings modal with ability to "peek" - minimize modal instead of hiding it, revealing page underneath so that you can check how UI looks like after changing the settings.
• Tab-switcher now has top-tabs (default) and side-tabs variants.
  • side-tabs currently only used with settings-modal only and has some styles that only make sense for that component (mostly because mobile)
  • in mobile view content page will use ~ 99% of screen width + side tabs fixed-ish width, intended use is that you can scroll horizontally to show tabs or show content, and there's a tiny bit of tabs visible when scrolled to content so that you don't forget that there are tabs on the left side.
  • tab-switcher also has small upgrade to allow setting content pane 100% height, used for blocks/mutes tab.
  • tab-switcher's css was massively improved to properly handle tab-switcher-within-tabswitcher case, doesn't look very pretty but what can you do.
• settings-modal (and hopefully everything it pulls) are loaded asynchronously now
  • updated vue to 2.6 to utilize Vue.observable to make async component resettable (if async component has failed it will stay failed forever without it)
  • fixed user-profile not using tab-switcher (?????)

What's NOT included:

• All pages are left as-is, only split from original sources (user-settings or settings). Therefore some things looks a bit weird like "Submit" buttons on some pages originating from user-settings
  • Small exception - "mutes" and "blocks" tabs are merged into "mutes and blocks" with level-2 tab switcher to switch between mutes and blocks. Just made sense to do that.

Screenshots

Desktop

Mobile

src/boot/routes.js

@@ -7,10 +7,8 @@ import Interactions from 'components/interactions/interactions.vue'
 import DMs from 'components/dm_timeline/dm_timeline.vue'
 import UserProfile from 'components/user_profile/user_profile.vue'
 import Search from 'components/search/search.vue'
-import Settings from 'components/settings/settings.vue'
 import Registration from 'components/registration/registration.vue'
 import PasswordReset from 'components/password_reset/password_reset.vue'
-import UserSettings from 'components/user_settings/user_settings.vue'
 import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import Notifications from 'components/notifications/notifications.vue'
@@ -56,12 +54,10 @@ export default (store) => {
     { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
-    { name: 'settings', path: '/settings', component: Settings },
     { name: 'registration', path: '/registration', component: Registration },
     { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
     { name: 'registration-token', path: '/registration/:token', component: Registration },
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
     { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
     { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },