No OneTemporary
Actions

Authored By

Unknown

Size

220 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/boot/routes.js b/src/boot/routes.js
	index c8194d5f07..95e4719999 100644
	--- a/src/boot/routes.js
	+++ b/src/boot/routes.js
	@@ -1,86 +1,92 @@
	import PublicTimeline from 'components/public_timeline/public_timeline.vue'
	import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
	import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
	import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
	import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
	import ConversationPage from 'components/conversation-page/conversation-page.vue'
	import Interactions from 'components/interactions/interactions.vue'
	import DMs from 'components/dm_timeline/dm_timeline.vue'
	import ChatList from 'components/chat_list/chat_list.vue'
	import Chat from 'components/chat/chat.vue'
	import UserProfile from 'components/user_profile/user_profile.vue'
	import Search from 'components/search/search.vue'
	import Registration from 'components/registration/registration.vue'
	import PasswordReset from 'components/password_reset/password_reset.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'
	import AuthForm from 'components/auth_form/auth_form.js'
	import ShoutPanel from 'components/shout_panel/shout_panel.vue'
	import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
	import About from 'components/about/about.vue'
	import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
	+import Lists from 'components/lists/lists.vue'
	+import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
	+import ListsEdit from 'components/lists_edit/lists_edit.vue'

	export default (store) => {
	const validateAuthenticatedRoute = (to, from, next) => {
	if (store.state.users.currentUser) {
	next()
	} else {
	next(store.state.instance.redirectRootNoLogin \|\| '/main/all')
	}
	}

	let routes = [
	{
	name: 'root',
	path: '/',
	redirect: _to => {
	return (store.state.users.currentUser
	? store.state.instance.redirectRootLogin
	: store.state.instance.redirectRootNoLogin) \|\| '/main/all'
	}
	},
	{ name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
	{ name: 'public-timeline', path: '/main/public', component: PublicTimeline },
	{ name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
	{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
	{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
	{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
	{
	name: 'remote-user-profile-acct',
	path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute
	},
	{
	name: 'remote-user-profile',
	path: '/remote-users/:hostname/:username',
	component: RemoteUserResolver,
	beforeEnter: validateAuthenticatedRoute
	},
	{ 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: '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: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
	{ name: 'login', path: '/login', component: AuthForm },
	{ name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
	{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
	{ name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
	{ name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
	{ name: 'about', path: '/about', component: About },
	- { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile }
	+ { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile },
	+ { name: 'lists', path: '/lists', component: Lists },
	+ { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
	+ { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit }
	]

	if (store.state.instance.pleromaChatMessagesAvailable) {
	routes = routes.concat([
	{ name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
	{ name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }
	])
	}

	return routes
	}
	diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
	new file mode 100644
	index 0000000000..791b99b28f
	--- /dev/null
	+++ b/src/components/lists/lists.js
	@@ -0,0 +1,32 @@
	+import ListsCard from '../lists_card/lists_card.vue'
	+import ListsNew from '../lists_new/lists_new.vue'
	+
	+const Lists = {
	+ data () {
	+ return {
	+ isNew: false
	+ }
	+ },
	+ components: {
	+ ListsCard,
	+ ListsNew
	+ },
	+ created () {
	+ this.$store.dispatch('startFetchingLists')
	+ },
	+ computed: {
	+ lists () {
	+ return this.$store.state.lists.allLists
	+ }
	+ },
	+ methods: {
	+ cancelNewList () {
	+ this.isNew = false
	+ },
	+ newList () {
	+ this.isNew = true
	+ }
	+ }
	+}
	+
	+export default Lists
	diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
	new file mode 100644
	index 0000000000..fcc5644799
	--- /dev/null
	+++ b/src/components/lists/lists.vue
	@@ -0,0 +1,31 @@
	+<template>
	+ <div v-if="isNew">
	+ <ListsNew @cancel="cancelNewList" />
	+ </div>
	+ <div
	+ v-else
	+ class="settings panel panel-default"
	+ >
	+ <div class="panel-heading">
	+ <div class="title">
	+ {{ $t('lists.lists') }}
	+ </div>
	+ <button
	+ class="button-default"
	+ @click="newList"
	+ >
	+ {{ $t("lists.new") }}
	+ </button>
	+ </div>
	+ <div class="panel-body">
	+ <ListsCard
	+ v-for="list in lists.slice().reverse()"
	+ :key="list"
	+ :list="list"
	+ class="list-item"
	+ />
	+ </div>
	+ </div>
	+</template>
	+
	+<script src="./lists.js"></script>
	diff --git a/src/components/lists_card/lists_card.js b/src/components/lists_card/lists_card.js
	new file mode 100644
	index 0000000000..b503caec46
	--- /dev/null
	+++ b/src/components/lists_card/lists_card.js
	@@ -0,0 +1,16 @@
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faEllipsisH
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faEllipsisH
	+)
	+
	+const ListsCard = {
	+ props: [
	+ 'list'
	+ ]
	+}
	+
	+export default ListsCard
	diff --git a/src/components/lists_card/lists_card.vue b/src/components/lists_card/lists_card.vue
	new file mode 100644
	index 0000000000..13866d8cbc
	--- /dev/null
	+++ b/src/components/lists_card/lists_card.vue
	@@ -0,0 +1,51 @@
	+<template>
	+ <div class="list-card">
	+ <router-link
	+ :to="{ name: 'lists-timeline', params: { id: list.id } }"
	+ class="list-name"
	+ >
	+ {{ list.title }}
	+ </router-link>
	+ <router-link
	+ :to="{ name: 'lists-edit', params: { id: list.id } }"
	+ class="button-list-edit"
	+ >
	+ <FAIcon
	+ class="fa-scale-110 fa-old-padding"
	+ icon="ellipsis-h"
	+ />
	+ </router-link>
	+ </div>
	+</template>
	+
	+<script src="./lists_card.js"></script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.list-card {
	+ display: flex;
	+}
	+
	+.list-name,
	+.button-list-edit {
	+ margin: 0;
	+ padding: 1em;
	+ color: $fallback--link;
	+ color: var(--link, $fallback--link);
	+
	+ &:hover {
	+ background-color: $fallback--lightBg;
	+ background-color: var(--selectedMenu, $fallback--lightBg);
	+ color: $fallback--link;
	+ color: var(--selectedMenuText, $fallback--link);
	+ --faint: var(--selectedMenuFaintText, $fallback--faint);
	+ --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	+ --lightText: var(--selectedMenuLightText, $fallback--lightText);
	+ }
	+}
	+
	+.list-name {
	+ flex-grow: 1;
	+}
	+</style>
	diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
	new file mode 100644
	index 0000000000..a68bb58986
	--- /dev/null
	+++ b/src/components/lists_edit/lists_edit.js
	@@ -0,0 +1,91 @@
	+import { mapState, mapGetters } from 'vuex'
	+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	+import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
	+import UserAvatar from '../user_avatar/user_avatar.vue'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faSearch,
	+ faChevronLeft
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faSearch,
	+ faChevronLeft
	+)
	+
	+const ListsNew = {
	+ components: {
	+ BasicUserCard,
	+ UserAvatar,
	+ ListsUserSearch
	+ },
	+ data () {
	+ return {
	+ title: '',
	+ userIds: [],
	+ selectedUserIds: []
	+ }
	+ },
	+ created () {
	+ this.$store.dispatch('fetchList', { id: this.id })
	+ .then(() => { this.title = this.findListTitle(this.id) })
	+ this.$store.dispatch('fetchListAccounts', { id: this.id })
	+ .then(() => {
	+ this.selectedUserIds = this.findListAccounts(this.id)
	+ this.selectedUserIds.forEach(userId => {
	+ this.$store.dispatch('fetchUserIfMissing', userId)
	+ })
	+ })
	+ },
	+ computed: {
	+ id () {
	+ return this.$route.params.id
	+ },
	+ users () {
	+ return this.userIds.map(userId => this.findUser(userId))
	+ },
	+ selectedUsers () {
	+ return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
	+ },
	+ ...mapState({
	+ currentUser: state => state.users.currentUser
	+ }),
	+ ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
	+ },
	+ methods: {
	+ onInput () {
	+ this.search(this.query)
	+ },
	+ selectUser (user) {
	+ if (this.selectedUserIds.includes(user.id)) {
	+ this.removeUser(user.id)
	+ } else {
	+ this.addUser(user)
	+ }
	+ },
	+ isSelected (user) {
	+ return this.selectedUserIds.includes(user.id)
	+ },
	+ addUser (user) {
	+ this.selectedUserIds.push(user.id)
	+ },
	+ removeUser (userId) {
	+ this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
	+ },
	+ onResults (results) {
	+ this.userIds = results
	+ },
	+ updateList () {
	+ this.$store.dispatch('setList', { id: this.id, title: this.title })
	+ this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
	+
	+ this.$router.push({ name: 'lists-timeline', params: { id: this.id } })
	+ },
	+ deleteList () {
	+ this.$store.dispatch('deleteList', { id: this.id })
	+ this.$router.push({ name: 'lists' })
	+ }
	+ }
	+}
	+
	+export default ListsNew
	diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
	new file mode 100644
	index 0000000000..69007b0224
	--- /dev/null
	+++ b/src/components/lists_edit/lists_edit.vue
	@@ -0,0 +1,108 @@
	+<template>
	+ <div class="panel-default panel list-edit">
	+ <div
	+ ref="header"
	+ class="panel-heading"
	+ >
	+ <button
	+ class="button-unstyled go-back-button"
	+ @click="$router.back"
	+ >
	+ <FAIcon
	+ size="lg"
	+ icon="chevron-left"
	+ />
	+ </button>
	+ </div>
	+ <div class="input-wrap">
	+ <input
	+ ref="title"
	+ v-model="title"
	+ :placeholder="$t('lists.title')"
	+ >
	+ </div>
	+ <div class="member-list">
	+ <div
	+ v-for="user in selectedUsers"
	+ :key="user.id"
	+ class="member"
	+ >
	+ <BasicUserCard
	+ :user="user"
	+ :class="isSelected(user) ? 'selected' : ''"
	+ @click.capture.prevent="selectUser(user)"
	+ />
	+ </div>
	+ </div>
	+ <ListsUserSearch @results="onResults" />
	+ <div class="member-list">
	+ <div
	+ v-for="user in users"
	+ :key="user.id"
	+ class="member"
	+ >
	+ <BasicUserCard
	+ :user="user"
	+ :class="isSelected(user) ? 'selected' : ''"
	+ @click.capture.prevent="selectUser(user)"
	+ />
	+ </div>
	+ </div>
	+ <button
	+ :disabled="title && title.length === 0"
	+ class="btn button-default"
	+ @click="updateList"
	+ >
	+ {{ $t('lists.save') }}
	+ </button>
	+ <button
	+ class="btn button-default"
	+ @click="deleteList"
	+ >
	+ {{ $t('lists.delete') }}
	+ </button>
	+ </div>
	+</template>
	+
	+<script src="./lists_edit.js"></script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.list-edit {
	+ .input-wrap {
	+ display: flex;
	+ margin: 0.7em 0.5em 0.7em 0.5em;
	+
	+ input {
	+ width: 100%;
	+ }
	+ }
	+
	+ .search-icon {
	+ margin-right: 0.3em;
	+ }
	+
	+ .member-list {
	+ padding-bottom: 0.7rem;
	+ }
	+
	+ .basic-user-card:hover,
	+ .basic-user-card.selected {
	+ cursor: pointer;
	+ background-color: var(--selectedPost, $fallback--lightBg);
	+ }
	+
	+ .go-back-button {
	+ text-align: center;
	+ line-height: 1;
	+ height: 100%;
	+ align-self: start;
	+ width: var(--__panel-heading-height-inner);
	+ }
	+
	+ .btn {
	+ margin: 0.5em;
	+ }
	+}
	+</style>
	diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
	new file mode 100644
	index 0000000000..37e7868cbd
	--- /dev/null
	+++ b/src/components/lists_menu/lists_menu_content.js
	@@ -0,0 +1,33 @@
	+import { mapState } from 'vuex'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faUsers,
	+ faGlobe,
	+ faBookmark,
	+ faEnvelope,
	+ faHome
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faUsers,
	+ faGlobe,
	+ faBookmark,
	+ faEnvelope,
	+ faHome
	+)
	+
	+const ListsMenuContent = {
	+ created () {
	+ this.$store.dispatch('startFetchingLists')
	+ },
	+ computed: {
	+ ...mapState({
	+ lists: state => state.lists.allLists,
	+ currentUser: state => state.users.currentUser,
	+ privateMode: state => state.instance.private,
	+ federating: state => state.instance.federating
	+ })
	+ }
	+}
	+
	+export default ListsMenuContent
	diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue
	new file mode 100644
	index 0000000000..e910d6eb28
	--- /dev/null
	+++ b/src/components/lists_menu/lists_menu_content.vue
	@@ -0,0 +1,17 @@
	+<template>
	+ <ul>
	+ <li
	+ v-for="list in lists.slice().reverse()"
	+ :key="list.id"
	+ >
	+ <router-link
	+ class="menu-item"
	+ :to="{ name: 'lists-timeline', params: { id: list.id } }"
	+ >
	+ {{ list.title }}
	+ </router-link>
	+ </li>
	+ </ul>
	+</template>
	+
	+<script src="./lists_menu_content.js"></script>
	diff --git a/src/components/lists_new/lists_new.js b/src/components/lists_new/lists_new.js
	new file mode 100644
	index 0000000000..63dc28ad7b
	--- /dev/null
	+++ b/src/components/lists_new/lists_new.js
	@@ -0,0 +1,79 @@
	+import { mapState, mapGetters } from 'vuex'
	+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
	+import UserAvatar from '../user_avatar/user_avatar.vue'
	+import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faSearch,
	+ faChevronLeft
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faSearch,
	+ faChevronLeft
	+)
	+
	+const ListsNew = {
	+ components: {
	+ BasicUserCard,
	+ UserAvatar,
	+ ListsUserSearch
	+ },
	+ data () {
	+ return {
	+ title: '',
	+ userIds: [],
	+ selectedUserIds: []
	+ }
	+ },
	+ computed: {
	+ users () {
	+ return this.userIds.map(userId => this.findUser(userId))
	+ },
	+ selectedUsers () {
	+ return this.selectedUserIds.map(userId => this.findUser(userId))
	+ },
	+ ...mapState({
	+ currentUser: state => state.users.currentUser
	+ }),
	+ ...mapGetters(['findUser'])
	+ },
	+ methods: {
	+ goBack () {
	+ this.$emit('cancel')
	+ },
	+ onInput () {
	+ this.search(this.query)
	+ },
	+ selectUser (user) {
	+ if (this.selectedUserIds.includes(user.id)) {
	+ this.removeUser(user.id)
	+ } else {
	+ this.addUser(user)
	+ }
	+ },
	+ isSelected (user) {
	+ return this.selectedUserIds.includes(user.id)
	+ },
	+ addUser (user) {
	+ this.selectedUserIds.push(user.id)
	+ },
	+ removeUser (userId) {
	+ this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
	+ },
	+ onResults (results) {
	+ this.userIds = results
	+ },
	+ createList () {
	+ // the API has two different endpoints for "creating a list with a name"
	+ // and "updating the accounts on the list".
	+ this.$store.dispatch('createList', { title: this.title })
	+ .then((list) => {
	+ this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
	+ this.$router.push({ name: 'lists-timeline', params: { id: list.id } })
	+ })
	+ }
	+ }
	+}
	+
	+export default ListsNew
	diff --git a/src/components/lists_new/lists_new.vue b/src/components/lists_new/lists_new.vue
	new file mode 100644
	index 0000000000..4733bdded4
	--- /dev/null
	+++ b/src/components/lists_new/lists_new.vue
	@@ -0,0 +1,95 @@
	+<template>
	+ <div class="panel-default panel list-new">
	+ <div
	+ ref="header"
	+ class="panel-heading"
	+ >
	+ <button
	+ class="button-unstyled go-back-button"
	+ @click="goBack"
	+ >
	+ <FAIcon
	+ size="lg"
	+ icon="chevron-left"
	+ />
	+ </button>
	+ </div>
	+ <div class="input-wrap">
	+ <input
	+ ref="title"
	+ v-model="title"
	+ :placeholder="$t('lists.title')"
	+ >
	+ </div>
	+
	+ <div class="member-list">
	+ <div
	+ v-for="user in selectedUsers"
	+ :key="user.id"
	+ class="member"
	+ >
	+ <BasicUserCard
	+ :user="user"
	+ :class="isSelected(user) ? 'selected' : ''"
	+ @click.capture.prevent="selectUser(user)"
	+ />
	+ </div>
	+ </div>
	+ <ListsUserSearch
	+ @results="onResults"
	+ />
	+ <div
	+ v-for="user in users"
	+ :key="user.id"
	+ class="member"
	+ >
	+ <BasicUserCard
	+ :user="user"
	+ :class="isSelected(user) ? 'selected' : ''"
	+ @click.capture.prevent="selectUser(user)"
	+ />
	+ </div>
	+
	+ <button
	+ :disabled="title && title.length === 0"
	+ class="btn button-default"
	+ @click="createList"
	+ >
	+ {{ $t('lists.create') }}
	+ </button>
	+ </div>
	+</template>
	+
	+<script src="./lists_new.js"></script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.list-new {
	+ .search-icon {
	+ margin-right: 0.3em;
	+ }
	+
	+ .member-list {
	+ padding-bottom: 0.7rem;
	+ }
	+
	+ .basic-user-card:hover,
	+ .basic-user-card.selected {
	+ cursor: pointer;
	+ background-color: var(--selectedPost, $fallback--lightBg);
	+ }
	+
	+ .go-back-button {
	+ text-align: center;
	+ line-height: 1;
	+ height: 100%;
	+ align-self: start;
	+ width: var(--__panel-heading-height-inner);
	+ }
	+
	+ .btn {
	+ margin: 0.5em;
	+ }
	+}
	+</style>
	diff --git a/src/components/lists_timeline/lists_timeline.js b/src/components/lists_timeline/lists_timeline.js
	new file mode 100644
	index 0000000000..7534420d72
	--- /dev/null
	+++ b/src/components/lists_timeline/lists_timeline.js
	@@ -0,0 +1,36 @@
	+import Timeline from '../timeline/timeline.vue'
	+const ListsTimeline = {
	+ data () {
	+ return {
	+ listId: null
	+ }
	+ },
	+ components: {
	+ Timeline
	+ },
	+ computed: {
	+ timeline () { return this.$store.state.statuses.timelines.list }
	+ },
	+ watch: {
	+ $route: function (route) {
	+ if (route.name === 'lists-timeline' && route.params.id !== this.listId) {
	+ this.listId = route.params.id
	+ this.$store.dispatch('stopFetchingTimeline', 'list')
	+ this.$store.commit('clearTimeline', { timeline: 'list' })
	+ this.$store.dispatch('fetchList', { id: this.listId })
	+ this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
	+ }
	+ }
	+ },
	+ created () {
	+ this.listId = this.$route.params.id
	+ this.$store.dispatch('fetchList', { id: this.listId })
	+ this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
	+ },
	+ unmounted () {
	+ this.$store.dispatch('stopFetchingTimeline', 'list')
	+ this.$store.commit('clearTimeline', { timeline: 'list' })
	+ }
	+}
	+
	+export default ListsTimeline
	diff --git a/src/components/lists_timeline/lists_timeline.vue b/src/components/lists_timeline/lists_timeline.vue
	new file mode 100644
	index 0000000000..18156b8120
	--- /dev/null
	+++ b/src/components/lists_timeline/lists_timeline.vue
	@@ -0,0 +1,10 @@
	+<template>
	+ <Timeline
	+ title="list.name"
	+ :timeline="timeline"
	+ :list-id="listId"
	+ timeline-name="list"
	+ />
	+</template>
	+
	+<script src="./lists_timeline.js"></script>
	diff --git a/src/components/lists_user_search/lists_user_search.js b/src/components/lists_user_search/lists_user_search.js
	new file mode 100644
	index 0000000000..5798841a9e
	--- /dev/null
	+++ b/src/components/lists_user_search/lists_user_search.js
	@@ -0,0 +1,46 @@
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faSearch,
	+ faChevronLeft
	+} from '@fortawesome/free-solid-svg-icons'
	+import { debounce } from 'lodash'
	+import Checkbox from '../checkbox/checkbox.vue'
	+
	+library.add(
	+ faSearch,
	+ faChevronLeft
	+)
	+
	+const ListsUserSearch = {
	+ components: {
	+ Checkbox
	+ },
	+ data () {
	+ return {
	+ loading: false,
	+ query: '',
	+ followingOnly: true
	+ }
	+ },
	+ methods: {
	+ onInput: debounce(function () {
	+ this.search(this.query)
	+ }, 2000),
	+ search (query) {
	+ if (!query) {
	+ this.loading = false
	+ return
	+ }
	+
	+ this.loading = true
	+ this.userIds = []
	+ this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
	+ .then(data => {
	+ this.loading = false
	+ this.$emit('results', data.accounts.map(a => a.id))
	+ })
	+ }
	+ }
	+}
	+
	+export default ListsUserSearch
	diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
	new file mode 100644
	index 0000000000..03fb3ba650
	--- /dev/null
	+++ b/src/components/lists_user_search/lists_user_search.vue
	@@ -0,0 +1,45 @@
	+<template>
	+ <div>
	+ <div class="input-wrap">
	+ <div class="input-search">
	+ <FAIcon
	+ class="search-icon fa-scale-110 fa-old-padding"
	+ icon="search"
	+ />
	+ </div>
	+ <input
	+ ref="search"
	+ v-model="query"
	+ :placeholder="$t('lists.search')"
	+ @input="onInput"
	+ >
	+ </div>
	+ <div class="input-wrap">
	+ <Checkbox
	+ v-model="followingOnly"
	+ @change="onInput"
	+ >
	+ {{ $t('lists.following_only') }}
	+ </Checkbox>
	+ </div>
	+ </div>
	+</template>
	+
	+<script src="./lists_user_search.js"></script>
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.input-wrap {
	+ display: flex;
	+ margin: 0.7em 0.5em 0.7em 0.5em;
	+
	+ input {
	+ width: 100%;
	+ }
	+}
	+
	+.search-icon {
	+ margin-right: 0.3em;
	+}
	+
	+</style>
	diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
	index 37bcb4095b..abeff6bf9c 100644
	--- a/src/components/nav_panel/nav_panel.js
	+++ b/src/components/nav_panel/nav_panel.js
	@@ -1,62 +1,73 @@
	import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
	+import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
	import { mapState, mapGetters } from 'vuex'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faUsers,
	faGlobe,
	faBookmark,
	faEnvelope,
	faChevronDown,
	faChevronUp,
	faComments,
	faBell,
	faInfoCircle,
	- faStream
	+ faStream,
	+ faList
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faUsers,
	faGlobe,
	faBookmark,
	faEnvelope,
	faChevronDown,
	faChevronUp,
	faComments,
	faBell,
	faInfoCircle,
	- faStream
	+ faStream,
	+ faList
	)

	const NavPanel = {
	created () {
	if (this.currentUser && this.currentUser.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: {
	- TimelineMenuContent
	+ TimelineMenuContent,
	+ ListsMenuContent
	},
	data () {
	return {
	- showTimelines: false
	+ showTimelines: false,
	+ showLists: false
	}
	},
	methods: {
	toggleTimelines () {
	this.showTimelines = !this.showTimelines
	+ },
	+ toggleLists () {
	+ this.showLists = !this.showLists
	}
	},
	computed: {
	+ listsNavigation () {
	+ return this.$store.getters.mergedConfig.listsNavigation
	+ },
	...mapState({
	currentUser: state => state.users.currentUser,
	followRequestCount: state => state.api.followRequests.length,
	privateMode: state => state.instance.private,
	federating: state => state.instance.federating,
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
	}),
	...mapGetters(['unreadChatCount'])
	}
	}

	export default NavPanel
	diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
	index 3fd27d8995..9322e233c4 100644
	--- a/src/components/nav_panel/nav_panel.vue
	+++ b/src/components/nav_panel/nav_panel.vue
	@@ -1,205 +1,250 @@
	<template>
	<div class="NavPanel">
	<div class="panel panel-default">
	<ul>
	<li v-if="currentUser \|\| !privateMode">
	<button
	class="button-unstyled menu-item"
	@click="toggleTimelines"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="stream"
	/>{{ $t("nav.timelines") }}
	<FAIcon
	class="timelines-chevron"
	fixed-width
	:icon="showTimelines ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<div
	v-show="showTimelines"
	class="timelines-background"
	>
	<TimelineMenuContent class="timelines" />
	</div>
	</li>
	+ <li v-if="currentUser && listsNavigation">
	+ <button
	+ class="button-unstyled menu-item"
	+ @click="toggleLists"
	+ >
	+ <router-link
	+ :to="{ name: 'lists' }"
	+ @click.stop
	+ >
	+ <FAIcon
	+ fixed-width
	+ class="fa-scale-110"
	+ icon="list"
	+ />{{ $t("nav.lists") }}
	+ </router-link>
	+ <FAIcon
	+ class="timelines-chevron"
	+ fixed-width
	+ :icon="showLists ? 'chevron-up' : 'chevron-down'"
	+ />
	+ </button>
	+ <div
	+ v-show="showLists"
	+ class="timelines-background"
	+ >
	+ <ListsMenuContent class="timelines" />
	+ </div>
	+ </li>
	+ <li v-if="currentUser && !listsNavigation">
	+ <router-link
	+ :to="{ name: 'lists' }"
	+ @click.stop
	+ >
	+ <button
	+ class="button-unstyled menu-item"
	+ @click="toggleLists"
	+ >
	+ <FAIcon
	+ fixed-width
	+ class="fa-scale-110"
	+ icon="list"
	+ />{{ $t("nav.lists") }}
	+ </button>
	+ </router-link>
	+ </li>
	<li v-if="currentUser">
	<router-link
	class="menu-item"
	:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="bell"
	/>{{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li v-if="currentUser && pleromaChatMessagesAvailable">
	<router-link
	class="menu-item"
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	>
	<div
	v-if="unreadChatCount"
	class="badge badge-notification"
	>
	{{ unreadChatCount }}
	</div>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="comments"
	/>{{ $t("nav.chats") }}
	</router-link>
	</li>
	<li v-if="currentUser && currentUser.locked">
	<router-link
	class="menu-item"
	:to="{ name: 'friend-requests' }"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="user-plus"
	/>{{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge badge-notification"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li>
	<router-link
	class="menu-item"
	:to="{ name: 'about' }"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="info-circle"
	/>{{ $t("nav.about") }}
	</router-link>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./nav_panel.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.NavPanel {
	.panel {
	overflow: hidden;
	box-shadow: var(--panelShadow);
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	li {
	position: relative;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	padding: 0;
	}

	> li {
	&:first-child .menu-item {
	border-top-right-radius: $fallback--panelRadius;
	border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-top-left-radius: $fallback--panelRadius;
	border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&:last-child .menu-item {
	border-bottom-right-radius: $fallback--panelRadius;
	border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
	border-bottom-left-radius: $fallback--panelRadius;
	border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
	}
	}

	li:last-child {
	border: none;
	}

	.menu-item {
	display: block;
	box-sizing: border-box;
	height: 3.5em;
	line-height: 3.5em;
	padding: 0 1em;
	width: 100%;
	color: $fallback--link;
	color: var(--link, $fallback--link);

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuText, $fallback--link);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);
	}

	&.router-link-active {
	font-weight: bolder;
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuText, $fallback--text);
	--faint: var(--selectedMenuFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuLightText, $fallback--lightText);
	--icon: var(--selectedMenuIcon, $fallback--icon);

	&:hover {
	text-decoration: underline;
	}
	}
	}

	.timelines-chevron {
	margin-left: 0.8em;
	font-size: 1.1em;
	}

	.timelines-background {
	padding: 0 0 0 0.6em;
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenu, $fallback--lightBg);
	border-top: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.timelines {
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.fa-scale-110 {
	margin-right: 0.8em;
	}

	.badge {
	position: absolute;
	right: 0.6rem;
	top: 1.25em;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index a260920024..91015955f5 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,435 +1,482 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher
	:prompt-text="$t('settings.interfaceLanguage')"
	:language="language"
	:set-language="val => language = val"
	/>
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="sidebarRight">
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceWallpaperUsed">
	<BooleanSetting path="hideInstanceWallpaper">
	{{ $t('settings.hide_wallpaper') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	:disabled="!streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="useStreamingApi"
	expert="1"
	>
	{{ $t('settings.useStreamingApi') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="virtualScrolling"
	expert="1"
	>
	{{ $t('settings.virtual_scrolling') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="disableStickyHeaders">
	{{ $t('settings.disable_sticky_headers') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="showScrollbars">
	{{ $t('settings.show_scrollbars') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="userPopoverZoom"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_zoom') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="userPopoverOverlay"
	expert="1"
	>
	{{ $t('settings.user_popover_avatar_overlay') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	v-if="user"
	id="thirdColumnMode"
	path="thirdColumnMode"
	:options="thirdColumnModeOptions"
	>
	{{ $t('settings.third_column_mode') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceShoutboxPresent">
	<BooleanSetting
	path="hideShoutbox"
	expert="1"
	>
	{{ $t('settings.hide_shoutbox') }}
	</BooleanSetting>
	</li>
	+ <li>
	+ <BooleanSetting path="listsNavigation">
	+ {{ $t('settings.lists_navigation') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <h3>{{ $t('settings.columns') }}</h3>
	+ </li>
	+ <li>
	+ <BooleanSetting path="disableStickyHeaders">
	+ {{ $t('settings.disable_sticky_headers') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="showScrollbars">
	+ {{ $t('settings.show_scrollbars') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <BooleanSetting path="sidebarRight">
	+ {{ $t('settings.right_sidebar') }}
	+ </BooleanSetting>
	+ </li>
	+ <li>
	+ <ChoiceSetting
	+ v-if="user"
	+ id="thirdColumnMode"
	+ path="thirdColumnMode"
	+ :options="thirdColumnModeOptions"
	+ >
	+ {{ $t('settings.third_column_mode') }}
	+ </ChoiceSetting>
	+ </li>
	+ <li v-if="expertLevel > 0">
	+ {{ $t('settings.column_sizes') }}
	+ <div class="column-settings">
	+ <SizeSetting
	+ v-for="column in columns"
	+ :key="column"
	+ :path="column + 'ColumnWidth'"
	+ :units="horizontalUnits"
	+ expert="1"
	+ >
	+ {{ $t('settings.column_sizes_' + column) }}
	+ </SizeSetting>
	+ </div>
	+ </li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.post_look_feel') }}</h2>
	<ul class="setting-list">
	<li>
	<ChoiceSetting
	id="conversationDisplay"
	path="conversationDisplay"
	:options="conversationDisplayOptions"
	>
	{{ $t('settings.conversation_display') }}
	</ChoiceSetting>
	</li>
	<ul
	v-if="conversationDisplay !== 'linear'"
	class="setting-list suboptions"
	>
	<li>
	<BooleanSetting path="conversationTreeAdvanced">
	{{ $t('settings.tree_advanced') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="conversationTreeFadeAncestors"
	:expert="1"
	>
	{{ $t('settings.tree_fade_ancestors') }}
	</BooleanSetting>
	</li>
	<li>
	<IntegerSetting
	path="maxDepthInThread"
	:min="3"
	:expert="1"
	>
	{{ $t('settings.max_depth_in_thread') }}
	</IntegerSetting>
	</li>
	<li>
	<ChoiceSetting
	id="conversationOtherRepliesButton"
	path="conversationOtherRepliesButton"
	:options="conversationOtherRepliesButtonOptions"
	:expert="1"
	>
	{{ $t('settings.conversation_other_replies_button') }}
	</ChoiceSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting path="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="emojiReactionsOnTimeline"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	v-if="user"
	path="serverSide_stripRichContent"
	expert="1"
	>
	{{ $t('settings.no_rich_text_description') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.attachments') }}</h3>
	<li>
	<BooleanSetting
	path="useContainFit"
	expert="1"
	>
	{{ $t('settings.use_contain_fit') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="preloadImage"
	expert="1"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useOneClickNsfw"
	expert="1"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting
	path="loopVideo"
	expert="1"
	>
	{{ $t('settings.loop_video') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="loopVideoSilentOnly"
	expert="1"
	:disabled="!loopVideo \|\| !loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</BooleanSetting>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting
	path="playVideosInModal"
	expert="1"
	>
	{{ $t('settings.play_videos_in_modal') }}
	</BooleanSetting>
	</li>
	<h3>{{ $t('settings.mention_links') }}</h3>
	<li>
	<ChoiceSetting
	id="mentionLinkDisplay"
	path="mentionLinkDisplay"
	:options="mentionLinkDisplayOptions"
	>
	{{ $t('settings.mention_link_display') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkShowTooltip"
	expert="1"
	>
	{{ $t('settings.mention_link_use_tooltip') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useAtIcon"
	expert="1"
	>
	{{ $t('settings.use_at_icon') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="mentionLinkShowAvatar">
	{{ $t('settings.mention_link_show_avatar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="mentionLinkFadeDomain"
	expert="1"
	>
	{{ $t('settings.mention_link_fade_domain') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkBoldenYou"
	expert="1"
	>
	{{ $t('settings.mention_link_bolden_you') }}
	</BooleanSetting>
	</li>
	<h3 v-if="expertLevel > 0">
	{{ $t('settings.fun') }}
	</h3>
	<li>
	<BooleanSetting
	path="greentext"
	expert="1"
	>
	{{ $t('settings.greentext') }}
	</BooleanSetting>
	</li>
	<li v-if="user">
	<BooleanSetting
	path="mentionLinkShowYous"
	expert="1"
	>
	{{ $t('settings.show_yous') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div
	v-if="user"
	class="setting-item"
	>
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	<label for="default-vis">
	{{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
	<ScopeSelector
	class="scope-selector"
	:show-all="true"
	:user-default="serverSide_defaultScope"
	:initial-scope="serverSide_defaultScope"
	:on-scope-change="changeDefaultScope"
	/>
	</label>
	</li>
	<li>
	<!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
	<BooleanSetting path="sensitiveByDefault">
	{{ $t('settings.sensitive_by_default') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="scopeCopy"
	expert="1"
	>
	{{ $t('settings.scope_copy') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowSubjectInput"
	expert="1"
	>
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	id="subjectLineBehavior"
	path="subjectLineBehavior"
	:options="subjectLineOptions"
	expert="1"
	>
	{{ $t('settings.subject_line_behavior') }}
	</ChoiceSetting>
	</li>
	<li v-if="postFormats.length > 0">
	<ChoiceSetting
	id="postContentType"
	path="postContentType"
	:options="postContentOptions"
	>
	{{ $t('settings.post_status_content_type') }}
	</ChoiceSetting>
	</li>
	<li>
	<BooleanSetting
	path="minimalScopesMode"
	expert="1"
	>
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="alwaysShowNewPostButton"
	expert="1"
	>
	{{ $t('settings.always_show_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="autohideFloatingPostButton"
	expert="1"
	>
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="padEmoji"
	expert="1"
	>
	{{ $t('settings.pad_emoji') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./general_tab.js"></script>
	diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
	index f45f8deffd..913fa69562 100644
	--- a/src/components/side_drawer/side_drawer.js
	+++ b/src/components/side_drawer/side_drawer.js
	@@ -1,111 +1,113 @@
	import { mapState, mapGetters } from 'vuex'
	import UserCard from '../user_card/user_card.vue'
	import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
	import GestureService from '../../services/gesture_service/gesture_service'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	- faInfoCircle
	+ faInfoCircle,
	+ faList
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faSignInAlt,
	faSignOutAlt,
	faHome,
	faComments,
	faBell,
	faUserPlus,
	faBullhorn,
	faSearch,
	faTachometerAlt,
	faCog,
	- faInfoCircle
	+ faInfoCircle,
	+ faList
	)

	const SideDrawer = {
	props: ['logout'],
	data: () => ({
	closed: true,
	closeGesture: undefined
	}),
	created () {
	this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)

	if (this.currentUser && this.currentUser.locked) {
	this.$store.dispatch('startFetchingFollowRequests')
	}
	},
	components: { UserCard },
	computed: {
	currentUser () {
	return this.$store.state.users.currentUser
	},
	shout () { return this.$store.state.shout.joined },
	unseenNotifications () {
	return unseenNotificationsFromStore(this.$store)
	},
	unseenNotificationsCount () {
	return this.unseenNotifications.length
	},
	suggestionsEnabled () {
	return this.$store.state.instance.suggestionsEnabled
	},
	logo () {
	return this.$store.state.instance.logo
	},
	hideSitename () {
	return this.$store.state.instance.hideSitename
	},
	sitename () {
	return this.$store.state.instance.name
	},
	followRequestCount () {
	return this.$store.state.api.followRequests.length
	},
	privateMode () {
	return this.$store.state.instance.private
	},
	federating () {
	return this.$store.state.instance.federating
	},
	timelinesRoute () {
	if (this.$store.state.interface.lastTimeline) {
	return this.$store.state.interface.lastTimeline
	}
	return this.currentUser ? 'friends' : 'public-timeline'
	},
	...mapState({
	pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
	}),
	...mapGetters(['unreadChatCount'])
	},
	methods: {
	toggleDrawer () {
	this.closed = !this.closed
	},
	doLogout () {
	this.logout()
	this.toggleDrawer()
	},
	touchStart (e) {
	GestureService.beginSwipe(e, this.closeGesture)
	},
	touchMove (e) {
	GestureService.updateSwipe(e, this.closeGesture)
	},
	openSettingsModal () {
	this.$store.dispatch('openSettingsModal')
	}
	}
	}

	export default SideDrawer
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index 7547fb08b3..7d9d36d7c2 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,351 +1,363 @@
	<template>
	<div
	class="side-drawer-container"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div
	class="side-drawer-darken"
	:class="{ 'side-drawer-darken-closed': closed}"
	/>
	<div
	class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div
	class="side-drawer-heading"
	@click="toggleDrawer"
	>
	<UserCard
	v-if="currentUser"
	:user-id="currentUser.id"
	:hide-bio="true"
	/>
	<div
	v-else
	class="side-drawer-logo-wrapper"
	>
	<img :src="logo">
	<span v-if="!hideSitename">{{ sitename }}</span>
	</div>
	</div>
	<ul>
	<li
	v-if="!currentUser"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'login' }">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-in-alt"
	/> {{ $t("login.login") }}
	</router-link>
	</li>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: timelinesRoute }">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="home"
	/> {{ $t("nav.timelines") }}
	</router-link>
	</li>
	+ <li
	+ v-if="currentUser"
	+ @click="toggleDrawer"
	+ >
	+ <router-link :to="{ name: 'lists' }">
	+ <FAIcon
	+ fixed-width
	+ class="fa-scale-110 fa-old-padding"
	+ icon="list"
	+ /> {{ $t("nav.lists") }}
	+ </router-link>
	+ </li>
	<li
	v-if="currentUser && pleromaChatMessagesAvailable"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	style="position: relative"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="comments"
	/> {{ $t("nav.chats") }}
	<span
	v-if="unreadChatCount"
	class="badge badge-notification"
	>
	{{ unreadChatCount }}
	</span>
	</router-link>
	</li>
	</ul>
	<ul v-if="currentUser">
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/> {{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li
	v-if="currentUser.locked"
	@click="toggleDrawer"
	>
	<router-link to="/friend-requests">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge badge-notification"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="shout"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'shout-panel' }">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("shoutbox.title") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'search' }">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="search"
	/> {{ $t("nav.search") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && suggestionsEnabled"
	@click="toggleDrawer"
	>
	<router-link :to="{ name: 'who-to-follow' }">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<button
	class="button-unstyled -link -fullwidth"
	@click="openSettingsModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	/> {{ $t("settings.settings") }}
	</button>
	</li>
	<li @click="toggleDrawer">
	<router-link :to="{ name: 'about'}">
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="info-circle"
	/> {{ $t("nav.about") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.role === 'admin'"
	@click="toggleDrawer"
	>
	<a
	href="/pleroma/admin/#/login-pleroma"
	target="_blank"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	/> {{ $t("nav.administration") }}
	</a>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<button
	class="button-unstyled -link -fullwidth"
	@click="doLogout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	/> {{ $t("login.logout") }}
	</button>
	</li>
	</ul>
	</div>
	<div
	class="side-drawer-click-outside"
	:class="{'side-drawer-click-outside-closed': closed}"
	@click.stop.prevent="toggleDrawer"
	/>
	</div>
	</template>

	<script src="./side_drawer.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.side-drawer-container {
	position: fixed;
	z-index: var(--ZI_navbar);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	transition-duration: 0s;
	transition-property: transform;
	}

	.side-drawer-container-open {
	transform: translate(0%);
	}

	.side-drawer-container-closed {
	transition-delay: 0.35s;
	transform: translate(-100%);
	}

	.side-drawer-darken {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: -1;
	transition: 0.35s;
	transition-property: background-color;
	background-color: rgba(0, 0, 0, 0.5);
	}

	.side-drawer-darken-closed {
	background-color: rgba(0, 0, 0, 0);
	}

	.side-drawer-click-outside {
	flex: 1 1 100%;
	}

	.side-drawer {
	overflow-x: hidden;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	transition: 0.35s;
	transition-property: transform;
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: var(--panelShadow);
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	--icon: var(--popoverIcon, $fallback--icon);

	.badge {
	margin-left: 10px;
	}
	}

	.side-drawer-logo-wrapper {
	display: flex;
	align-items: center;
	padding: 0.85em;

	img {
	flex: none;
	height: 50px;
	margin-right: 0.85em;
	}

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.side-drawer-click-outside-closed {
	flex: 0 0 0;
	}

	.side-drawer-closed {
	transform: translate(-100%);
	}

	.side-drawer-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	display: flex;
	padding: 0;
	margin: 0;
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;

	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.side-drawer ul:last-child {
	border: 0;
	}

	.side-drawer li {
	padding: 0;

	a, button {
	box-sizing: border-box;
	display: block;
	height: 3em;
	line-height: 3em;
	padding: 0 0.7em;

	&:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}
	</style>
	diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
	index f195940a25..8f6cae66b9 100644
	--- a/src/components/timeline/timeline.js
	+++ b/src/components/timeline/timeline.js
	@@ -1,251 +1,254 @@
	import Status from '../status/status.vue'
	import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
	import Conversation from '../conversation/conversation.vue'
	import TimelineMenu from '../timeline_menu/timeline_menu.vue'
	import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
	import { debounce, throttle, keyBy } from 'lodash'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch,
	faCog
	)

	const Timeline = {
	props: [
	'timeline',
	'timelineName',
	'title',
	'userId',
	+ 'listId',
	'tag',
	'embedded',
	'count',
	'pinnedStatusIds',
	'inProfile',
	'footerSlipgate' // reference to an element where we should put our footer
	],
	data () {
	return {
	paused: false,
	unfocused: false,
	bottomedOut: false,
	virtualScrollIndex: 0,
	blockingClicks: false
	}
	},
	components: {
	Status,
	Conversation,
	TimelineMenu,
	QuickFilterSettings,
	QuickViewSettings
	},
	computed: {
	filteredVisibleStatuses () {
	return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' \|\| (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
	},
	filteredPinnedStatusIds () {
	return (this.pinnedStatusIds \|\| []).filter(statusId => this.timeline.statusesObject[statusId])
	},
	newStatusCount () {
	return this.timeline.newStatusCount
	},
	showLoadButton () {
	return this.timeline.newStatusCount > 0 \|\| this.timeline.flushMarker !== 0
	},
	loadButtonString () {
	if (this.timeline.flushMarker !== 0) {
	return this.$t('timeline.reload')
	} else {
	return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
	}
	},
	classes () {
	let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
	if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
	return {
	root: rootClasses,
	header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
	body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
	footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
	}
	},
	// id map of statuses which need to be hidden in the main list due to pinning logic
	pinnedStatusIdsObject () {
	return keyBy(this.pinnedStatusIds)
	},
	statusesToDisplay () {
	const amount = this.timeline.visibleStatuses.length
	const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
	const nonPinnedIndex = this.virtualScrollIndex - this.filteredPinnedStatusIds.length
	const min = Math.max(0, nonPinnedIndex - statusesPerSide)
	const max = Math.min(amount, nonPinnedIndex + statusesPerSide)
	return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
	},
	virtualScrollingEnabled () {
	return this.$store.getters.mergedConfig.virtualScrolling
	}
	},
	created () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	const showImmediately = this.timeline.visibleStatuses.length === 0

	window.addEventListener('scroll', this.handleScroll)

	if (store.state.api.fetchers[this.timelineName]) { return false }

	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	showImmediately,
	userId: this.userId,
	+ listId: this.listId,
	tag: this.tag
	})
	},
	mounted () {
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.unfocused = document.hidden
	}
	window.addEventListener('keydown', this.handleShortKey)
	setTimeout(this.determineVisibleStatuses, 250)
	},
	unmounted () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('keydown', this.handleShortKey)
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
	},
	methods: {
	stopBlockingClicks: debounce(function () {
	this.blockingClicks = false
	}, 1000),
	blockClicksTemporarily () {
	if (!this.blockingClicks) {
	this.blockingClicks = true
	}
	this.stopBlockingClicks()
	},
	handleShortKey (e) {
	// Ignore when input fields are focused
	if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
	if (e.key === '.') this.showNewStatuses()
	},
	showNewStatuses () {
	if (this.timeline.flushMarker !== 0) {
	this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
	this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
	this.fetchOlderStatuses()
	} else {
	this.blockClicksTemporarily()
	this.$store.commit('showNewStatuses', { timeline: this.timelineName })
	this.paused = false
	}
	window.scrollTo({ top: 0 })
	},
	fetchOlderStatuses: throttle(function () {
	const store = this.$store
	const credentials = store.state.users.currentUser.credentials
	store.commit('setLoading', { timeline: this.timelineName, value: true })
	timelineFetcher.fetchAndUpdate({
	store,
	credentials,
	timeline: this.timelineName,
	older: true,
	showImmediately: true,
	userId: this.userId,
	+ listId: this.listId,
	tag: this.tag
	}).then(({ statuses }) => {
	if (statuses && statuses.length === 0) {
	this.bottomedOut = true
	}
	}).finally(() =>
	store.commit('setLoading', { timeline: this.timelineName, value: false })
	)
	}, 1000, this),
	determineVisibleStatuses () {
	if (!this.$refs.timeline) return
	if (!this.virtualScrollingEnabled) return

	const statuses = this.$refs.timeline.children
	const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))

	if (statuses.length === 0) return

	const height = Math.max(document.body.offsetHeight, window.pageYOffset)

	const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)

	// Start from approximating the index of some visible status by using the
	// the center of the screen on the timeline.
	let approxIndex = Math.floor(statuses.length * (centerOfScreen / height))
	let err = statuses[approxIndex].getBoundingClientRect().y

	// if we have a previous scroll index that can be used, test if it's
	// closer than the previous approximation, use it if so

	const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
	if (Math.abs(err) > virtualScrollIndexY) {
	approxIndex = cappedScrollIndex
	err = virtualScrollIndexY
	}

	// if the status is too far from viewport, check the next/previous ones if
	// they happen to be better
	while (err < -20 && approxIndex < statuses.length - 1) {
	err += statuses[approxIndex].offsetHeight
	approxIndex++
	}
	while (err > window.innerHeight + 100 && approxIndex > 0) {
	approxIndex--
	err -= statuses[approxIndex].offsetHeight
	}

	// this status is now the center point for virtual scrolling and visible
	// statuses will be nearby statuses before and after it
	this.virtualScrollIndex = approxIndex
	},
	scrollLoad (e) {
	const bodyBRect = document.body.getBoundingClientRect()
	const height = Math.max(bodyBRect.height, -(bodyBRect.y))
	if (this.timeline.loading === false &&
	this.$el.offsetHeight > 0 &&
	(window.innerHeight + window.pageYOffset) >= (height - 750)) {
	this.fetchOlderStatuses()
	}
	},
	handleScroll: throttle(function (e) {
	this.determineVisibleStatuses()
	this.scrollLoad(e)
	}, 200),
	handleVisibilityChange () {
	this.unfocused = document.hidden
	}
	},
	watch: {
	newStatusCount (count) {
	if (!this.$store.getters.mergedConfig.streaming) {
	return
	}
	if (count > 0) {
	// only 'stream' them when you're scrolled to the top
	const doc = document.documentElement
	const top = (window.pageYOffset \|\| doc.scrollTop) - (doc.clientTop \|\| 0)
	if (top < 15 &&
	!this.paused &&
	!(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
	) {
	this.showNewStatuses()
	} else {
	this.paused = true
	}
	}
	}
	}
	}

	export default Timeline
	diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
	index a11e7b7ecb..5a67b0a53a 100644
	--- a/src/components/timeline_menu/timeline_menu.js
	+++ b/src/components/timeline_menu/timeline_menu.js
	@@ -1,67 +1,70 @@
	import Popover from '../popover/popover.vue'
	import TimelineMenuContent from './timeline_menu_content.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronDown
	} from '@fortawesome/free-solid-svg-icons'

	library.add(faChevronDown)

	// Route -> i18n key mapping, exported and not in the computed
	// because nav panel benefits from the same information.
	export const timelineNames = () => {
	return {
	friends: 'nav.home_timeline',
	bookmarks: 'nav.bookmarks',
	dms: 'nav.dms',
	'public-timeline': 'nav.public_tl',
	'public-external-timeline': 'nav.twkn'
	}
	}

	const TimelineMenu = {
	components: {
	Popover,
	TimelineMenuContent
	},
	data () {
	return {
	isOpen: false
	}
	},
	created () {
	if (timelineNames()[this.$route.name]) {
	this.$store.dispatch('setLastTimeline', this.$route.name)
	}
	},
	methods: {
	openMenu () {
	// $nextTick is too fast, animation won't play back but
	// instead starts in fully open position. Low values
	// like 1-5 work on fast machines but not on mobile, 25
	// seems like a good compromise that plays without significant
	// added lag.
	setTimeout(() => {
	this.isOpen = true
	}, 25)
	},
	blockOpen (event) {
	// For the blank area inside the button element.
	// Just setting @click.stop="" makes unintuitive behavior when
	// menu is open and clicking on the blank area doesn't close it.
	if (!this.isOpen) {
	event.stopPropagation()
	}
	},
	timelineName () {
	const route = this.$route.name
	if (route === 'tag-timeline') {
	return '#' + this.$route.params.tag
	}
	+ if (route === 'lists-timeline') {
	+ return this.$store.getters.findListTitle(this.$route.params.id)
	+ }
	const i18nkey = timelineNames()[this.$route.name]
	return i18nkey ? this.$t(i18nkey) : route
	}
	}
	}

	export default TimelineMenu
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index ae3be44328..7215b884fe 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,975 +1,987 @@
	{
	"about": {
	"mrf": {
	"federation": "Federation",
	"keyword": {
	"keyword_policies": "Keyword policies",
	"ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"reject": "Reject",
	"replace": "Replace",
	"is_replaced_by": "→"
	},
	"mrf_policies": "Enabled MRF policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"simple": {
	"simple_policies": "Instance-specific policies",
	"instance": "Instance",
	"reason": "Reason",
	"not_applicable": "N/A",
	"accept": "Accept",
	"accept_desc": "This instance only accepts messages from the following instances:",
	"reject": "Reject",
	"reject_desc": "This instance will not accept messages from the following instances:",
	"quarantine": "Quarantine",
	"quarantine_desc": "This instance will send only public posts to the following instances:",
	"ftl_removal": "Removal from \"Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media force-set as sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"shout": "Shoutbox",
	"pleroma_chat_messages": "Pleroma Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow",
	"upload_limit": "Upload limit"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"loading": "Loading…",
	"generic_error": "An error occured",
	"error_retry": "Please try again",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"never_show_again": "Never show again",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"peek": "Peek",
	"role": {
	"admin": "Admin",
	"moderator": "Moderator"
	},
	"flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
	"flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
	"flash_fail": "Failed to load flash content, see console for details.",
	"scope_in_timeline": {
	"direct": "Direct",
	"private": "Followers-only",
	"public": "Public",
	"unlisted": "Unlisted"
	}
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next",
	"counter": "{current} / {total}",
	"hide": "Close media viewer"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"friend_requests": "Follow requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct messages",
	"public_tl": "Public timeline",
	"timeline": "Timeline",
	"home_timeline": "Home timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"user_search": "User Search",
	"search": "Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	- "chats": "Chats"
	+ "chats": "Chats",
	+ "lists": "Lists"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"error": "Error fetching notifications: {0}",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"follow_request": "wants to follow you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications",
	"migrated_to": "migrated to",
	"reacted_with": "reacted with {0}",
	"poll_ended": "poll has ended"
	},
	"polls": {
	"add_poll": "Add poll",
	"add_option": "Add option",
	"option": "Option",
	"votes": "votes",
	"people_voted_count": "{count} person voted \| {count} people voted",
	"votes_count": "{count} vote \| {count} votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"not_enough_options": "Too few unique options in poll"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"unicode": "Unicode emoji",
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji"
	},
	"errors": {
	"storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
	},
	"interactions": {
	"favs_repeats": "Repeats and favorites",
	"follows": "New follows",
	"moves": "User migrates",
	"load_older": "Load older interactions"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"posting": "Posting",
	"post": "Post",
	"preview": "Preview",
	"preview_empty": "Empty",
	"empty_status_error": "Can't post an empty status with no files",
	"media_description_error": "Failed to update media, try again",
	"scope_notice": {
	"public": "This post will be visible to everyone",
	"private": "This post will be visible to your followers only",
	"unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
	},
	"scope": {
	"direct": "Direct - post to mentioned users only",
	"private": "Followers-only - post to followers only",
	"public": "Public - post to public timelines",
	"unlisted": "Unlisted - do not post to public timelines"
	}
	},
	"registration": {
	"bio_optional": "Bio (optional)",
	"email": "Email",
	"email_optional": "Email (optional)",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"reason": "Reason to register",
	"reason_placeholder": "This instance approves registrations manually.\nLet the administration know why you want to register.",
	"register": "Register",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	},
	"email_language": "In which language do you want to receive emails from the server?"
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"app_name": "App name",
	"expert_mode": "Show advanced",
	"save": "Save changes",
	"security": "Security",
	"setting_changed": "Setting is different from default",
	"setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"post_look_feel": "Posts Look & Feel",
	"mention_links": "Mention links",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	+ "lists_navigation": "Show lists in navigation",
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"email_language": "Language for receiving emails from the server",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	"mute_export": "Mute export",
	"mute_export_button": "Export your mutes to a csv file",
	"mute_import": "Mute import",
	"mute_import_error": "Error importing mutes",
	"mutes_imported": "Mutes imported! Processing them will take a while.",
	"import_mutes_from_a_csv_file": "Import mutes from a csv file",
	"account_backup": "Account backup",
	"account_backup_description": "This allows you to download an archive of your account information and your posts, but they cannot yet be imported into a Pleroma account.",
	"account_backup_table_head": "Backup",
	"download_backup": "Download",
	"backup_not_ready": "This backup is not ready yet.",
	"remove_backup": "Remove",
	"list_backups_error": "Error fetching backup list: {error}",
	"add_backup": "Create a new backup",
	"added_backup": "Added a new backup.",
	"add_backup_error": "Error adding a new backup: {error}",
	"blocks_tab": "Blocks",
	"bot": "This is a bot account",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data import / export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"account_alias": "Account aliases",
	"account_alias_table_head": "Alias",
	"list_aliases_error": "Error fetching aliases: {error}",
	"hide_list_aliases_error_action": "Close",
	"remove_alias": "Remove this alias",
	"new_alias_target": "Add a new alias (e.g. {example})",
	"added_alias": "Alias is added.",
	"add_alias_error": "Error adding alias: {error}",
	"move_account": "Move account",
	"move_account_notes": "If you want to move the account somewhere else, you must go to your target account and add an alias pointing here.",
	"move_account_target": "Target account (e.g. {example})",
	"moved_account": "Account is moved.",
	"move_account_error": "Error moving account: {error}",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"wordfilter": "Wordfilter",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"word_filter_and_more": "Word filter and more...",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_media_previews": "Hide media previews",
	"hide_muted_posts": "Hide posts of muted users",
	"mute_bot_posts": "Mute bot posts",
	"hide_bot_indication": "Hide bot indication in posts",
	"hide_all_muted_posts": "Hide muted posts",
	"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
	"hide_isp": "Hide instance-specific panel",
	"hide_shoutbox": "Hide instance shoutbox",
	"right_sidebar": "Reverse order of columns",
	"always_show_post_button": "Always show floating New Post button",
	"hide_wallpaper": "Hide instance wallpaper",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide all filtered posts",
	"hide_wordfiltered_statuses": "Hide word-filtered statuses",
	"hide_muted_threads": "Hide muted threads",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"file_export_import": {
	"backup_restore": "Settings backup",
	"backup_settings": "Backup settings to file",
	"backup_settings_theme": "Backup settings and theme to file",
	"restore_settings": "Restore settings from file",
	"errors": {
	"invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
	"file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
	"file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
	"file_slightly_new": "File minor version is different, some settings might not load"
	}
	},
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add field",
	"name": "Label",
	"value": "Content"
	},
	"account_privacy": "Privacy",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & bio",
	"new_email": "New email",
	"new_password": "New password",
	"posts": "Posts",
	"user_profiles": "User Profiles",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Favorites",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"notification_visibility_polls": "Ends of polls you voted in",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_favorites_description": "Don't show list of my favorites (people still get notified)",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show \"Admin\" badge in my profile",
	"show_moderator_badge": "Show \"Moderator\" badge in my profile",
	"nsfw_clickthrough": "Hide sensitive/NSFW media",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh token",
	"valid_until": "Valid until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile background",
	"profile_banner": "Profile banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"reply_visibility_following_short": "Show replies to my follows",
	"reply_visibility_self_short": "Show replies to self only",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"reset_avatar": "Reset avatar",
	"reset_profile_background": "Reset profile background",
	"reset_profile_banner": "Reset profile banner",
	"reset_avatar_confirm": "Do you really want to reset the avatar?",
	"reset_banner_confirm": "Do you really want to reset the banner?",
	"reset_background_confirm": "Do you really want to reset the background?",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"conversation_display": "Conversation display style",
	"conversation_display_tree": "Tree-style",
	"conversation_display_tree_quick": "Tree view",
	"disable_sticky_headers": "Don't stick column headers to top of the screen",
	"show_scrollbars": "Show side column's scrollbars",
	"third_column_mode": "When there's enough space, show third column containing",
	"third_column_mode_none": "Don't show third column at all",
	"third_column_mode_notifications": "Notifications column",
	"third_column_mode_postform": "Main post form and navigation",
	"tree_advanced": "Allow more flexible navigation in tree view",
	"tree_fade_ancestors": "Display ancestors of the current status in faint text",
	"conversation_display_linear": "Linear-style",
	"conversation_display_linear_quick": "Linear view",
	"conversation_other_replies_button": "Show the \"other replies\" button",
	"conversation_other_replies_button_below": "Below statuses",
	"conversation_other_replies_button_inside": "Inside statuses",
	"max_depth_in_thread": "Maximum number of levels in thread to display by default",
	"post_status_content_type": "Post status content type",
	"sensitive_by_default": "Mark posts as sensitive by default",
	"stop_gifs": "Pause animated images until you hover on them",
	"streaming": "Automatically show new posts when scrolled to the top",
	"auto_update": "Show new posts automatically",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"use_websockets": "Use websockets (Realtime updates)",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"virtual_scrolling": "Optimize timeline rendering",
	"use_at_icon": "Display {'@'} symbol as an icon instead of text",
	"mention_link_display": "Display mention links",
	"mention_link_display_short": "always as short names (e.g. {'@'}foo)",
	"mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_use_tooltip": "Show user card when clicking mention links",
	"mention_link_show_avatar": "Show user avatar beside the link",
	"mention_link_show_avatar_quick": "Show user avatar next to mentions",
	"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
	"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
	"user_popover_avatar_zoom": "Clicking on user avatar in popover zooms it instead of closing the popover",
	"user_popover_avatar_overlay": "Show user popover over user avatar",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"show_yous": "Show (You)s",
	"notifications": "Notifications",
	"notification_setting_filters": "Filters",
	"notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
	"notification_setting_privacy": "Privacy",
	"notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
	"notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
	"notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
	"enable_web_push_notifications": "Enable web push notifications",
	"more_settings": "More settings",
	"style": {
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity",
	"load_theme": "Load theme",
	"keep_as_is": "Keep as is",
	"use_snapshot": "Old version",
	"use_source": "New version",
	"help": {
	"upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
	"v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
	"future_version_imported": "File you imported was made in newer version of FE.",
	"older_version_imported": "File you imported was made in older version of FE.",
	"snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
	"snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
	"fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
	"fe_downgraded": "PleromaFE's version rolled back.",
	"migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
	"migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
	"snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
	}
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"alert_warning": "Warning",
	"alert_neutral": "Neutral",
	"post": "Posts/User bios",
	"badge": "Badge background",
	"popover": "Tooltips, menus, popovers",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text",
	"underlay": "Underlay",
	"wallpaper": "Wallpaper",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs",
	"chat": {
	"incoming": "Incoming",
	"outgoing": "Outgoing",
	"border": "Border"
	}
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hintV3": "For shadows you can also use the {0} notation to use other color slot.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"postCode": "Monospaced text in a post (rich text)"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	},
	"version": {
	"title": "Version",
	"backend_version": "Backend version",
	"frontend_version": "Frontend version"
	}
	},
	"time": {
	"unit": {
	"days": "{0} day \| {0} days",
	"days_short": "{0}d",
	"hours": "{0} hour \| {0} hours",
	"hours_short": "{0}h",
	"minutes": "{0} minute \| {0} minutes",
	"minutes_short": "{0}min",
	"months": "{0} month \| {0} months",
	"months_short": "{0}mo",
	"seconds": "{0} second \| {0} seconds",
	"seconds_short": "{0}s",
	"weeks": "{0} week \| {0} weeks",
	"weeks_short": "{0}w",
	"years": "{0} year \| {0} years",
	"years_short": "{0}y"
	},
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"now": "just now",
	"now_short": "now"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error": "Error fetching timeline: {0}",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses",
	"socket_reconnected": "Realtime connection established",
	"socket_broke": "Realtime connection lost: CloseEvent code {0}"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"delete": "Delete status",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"reply_to": "Reply to",
	"mentions": "Mentions",
	"replies_list": "Replies:",
	"replies_list_with_others": "Replies (+{numReplies} other): \| Replies (+{numReplies} others):",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"external_source": "External source",
	"thread_muted": "Thread muted",
	"thread_muted_and_words": ", has words:",
	"show_full_subject": "Show full subject",
	"hide_full_subject": "Hide full subject",
	"show_content": "Show content",
	"hide_content": "Hide content",
	"status_deleted": "This post was deleted",
	"nsfw": "NSFW",
	"expand": "Expand",
	"you": "(You)",
	"plus_more": "+{number} more",
	"many_attachments": "Post has {number} attachment(s)",
	"collapse_attachments": "Collapse attachments",
	"show_all_attachments": "Show all attachments",
	"show_attachment_in_modal": "Show in media modal",
	"show_attachment_description": "Preview description (open attachment for full description)",
	"hide_attachment": "Hide attachment",
	"remove_attachment": "Remove attachment",
	"attachment_stop_flash": "Stop Flash player",
	"move_up": "Shift attachment left",
	"move_down": "Shift attachment right",
	"open_gallery": "Open gallery",
	"thread_hide": "Hide this thread",
	"thread_show": "Show this thread",
	"thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) \| Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
	"thread_show_full_with_icon": "{icon} {text}",
	"thread_follow": "See the remaining part of this thread ({numStatus} status in total) \| See the remaining part of this thread ({numStatus} statuses in total)",
	"thread_follow_with_icon": "{icon} {text}",
	"ancestor_follow": "See {numReplies} other reply under this status \| See {numReplies} other replies under this status",
	"ancestor_follow_with_icon": "{icon} {text}",
	"show_all_conversation_with_icon": "{icon} {text}",
	"show_all_conversation": "Show full conversation ({numStatus} other status) \| Show full conversation ({numStatus} other statuses)",
	"show_only_conversation_under_this": "Only show replies to this status"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deactivated": "Deactivated",
	"deny": "Deny",
	"edit_profile": "Edit profile",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_cancel": "Cancel request",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_unfollow": "Unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"bot": "Bot",
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate account",
	"deactivate_account": "Deactivate account",
	"delete_account": "Delete account",
	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",
	"delete_user": "Delete user",
	"delete_user_data_and_deactivate_confirmation": "This will permanently delete the data from this account and deactivate it. Are you absolutely sure?"
	},
	"highlight": {
	"disabled": "No highlight",
	"solid": "Solid bg",
	"striped": "Striped bg",
	"side": "Side stripe"
	}
	},
	"user_profile": {
	"timeline_title": "User timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"add_reaction": "Add Reaction",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark"
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"message": "Upload failed: {0}",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"too_many_requests": "You have reached the limit of attempts, try again later.",
	"password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
	"password_reset_required": "You must reset your password to log in.",
	"password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
	},
	"chats": {
	"you": "You:",
	"message_user": "Message {nickname}",
	"delete": "Delete",
	"chats": "Chats",
	"new": "New Chat",
	"empty_message_error": "Cannot post empty message",
	"more": "More",
	"delete_confirm": "Do you really want to delete this message?",
	"error_loading_chat": "Something went wrong when loading the chat.",
	"error_sending_message": "Something went wrong when sending the message.",
	"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
	},
	+ "lists": {
	+ "lists": "Lists",
	+ "new": "New List",
	+ "title": "List title",
	+ "search": "Search users",
	+ "create": "Create",
	+ "save": "Save changes",
	+ "delete": "Delete list",
	+ "following_only": "Limit to Following"
	+ },
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	},
	"update": {
	"big_update_title": "Please bear with us",
	"big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
	"update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
	"update_bugs_gitlab": "Pleroma GitLab",
	"update_changelog": "For more details on what's changed, see {theFullChangelog}.",
	"update_changelog_here": "the full changelog",
	"art_by": "Art by {linkToArtist}"
	}
	}
	diff --git a/src/main.js b/src/main.js
	index fc798ed60e..0a050b04ad 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,103 +1,105 @@
	import { createStore } from 'vuex'

	import 'custom-event-polyfill'
	import './lib/event_target_polyfill.js'

	import interfaceModule from './modules/interface.js'
	import instanceModule from './modules/instance.js'
	import statusesModule from './modules/statuses.js'
	+import listsModule from './modules/lists.js'
	import usersModule from './modules/users.js'
	import apiModule from './modules/api.js'
	import configModule from './modules/config.js'
	import serverSideConfigModule from './modules/serverSideConfig.js'
	import serverSideStorageModule from './modules/serverSideStorage.js'
	import shoutModule from './modules/shout.js'
	import oauthModule from './modules/oauth.js'
	import authFlowModule from './modules/auth_flow.js'
	import mediaViewerModule from './modules/media_viewer.js'
	import oauthTokensModule from './modules/oauth_tokens.js'
	import reportsModule from './modules/reports.js'
	import pollsModule from './modules/polls.js'
	import postStatusModule from './modules/postStatus.js'
	import chatsModule from './modules/chats.js'

	import { createI18n } from 'vue-i18n'

	import createPersistedState from './lib/persisted_state.js'
	import pushNotifications from './lib/push_notifications_plugin.js'

	import messages from './i18n/messages.js'

	import afterStoreSetup from './boot/after_store.js'

	const currentLocale = (window.navigator.language \|\| 'en').split('-')[0]

	const i18n = createI18n({
	// By default, use the browser locale, we will update it if neccessary
	locale: 'en',
	fallbackLocale: 'en',
	messages: messages.default
	})

	messages.setLanguage(i18n, currentLocale)

	const persistedStateOptions = {
	paths: [
	'serverSideStorage.cache',
	'config',
	'users.lastLoginName',
	'oauth'
	]
	};

	(async () => {
	let storageError = false
	const plugins = [pushNotifications]
	try {
	const persistedState = await createPersistedState(persistedStateOptions)
	plugins.push(persistedState)
	} catch (e) {
	console.error(e)
	storageError = true
	}
	const store = createStore({
	modules: {
	i18n: {
	getters: {
	i18n: () => i18n.global
	}
	},
	interface: interfaceModule,
	instance: instanceModule,
	// TODO refactor users/statuses modules, they depend on each other
	users: usersModule,
	statuses: statusesModule,
	+ lists: listsModule,
	api: apiModule,
	config: configModule,
	serverSideConfig: serverSideConfigModule,
	serverSideStorage: serverSideStorageModule,
	shout: shoutModule,
	oauth: oauthModule,
	authFlow: authFlowModule,
	mediaViewer: mediaViewerModule,
	oauthTokens: oauthTokensModule,
	reports: reportsModule,
	polls: pollsModule,
	postStatus: postStatusModule,
	chats: chatsModule
	},
	plugins,
	strict: false // Socket modifies itself, let's ignore this for now.
	// strict: process.env.NODE_ENV !== 'production'
	})
	if (storageError) {
	store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
	}
	afterStoreSetup({ store, i18n })
	})()

	// These are inlined by webpack's DefinePlugin
	/* eslint-disable */
	window.___pleromafe_mode = process.env
	window.___pleromafe_commit_hash = COMMIT_HASH
	window.___pleromafe_dev_overrides = DEV_OVERRIDES
	diff --git a/src/modules/api.js b/src/modules/api.js
	index 28f2076ea3..80a978f921 100644
	--- a/src/modules/api.js
	+++ b/src/modules/api.js
	@@ -1,273 +1,286 @@
	import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
	import { WSConnectionStatus } from '../services/api/api.service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
	import { Socket } from 'phoenix'

	const retryTimeout = (multiplier) => 1000 * multiplier

	const api = {
	state: {
	retryMultiplier: 1,
	backendInteractor: backendInteractorService(),
	fetchers: {},
	socket: null,
	mastoUserSocket: null,
	mastoUserSocketStatus: null,
	followRequests: []
	},
	mutations: {
	setBackendInteractor (state, backendInteractor) {
	state.backendInteractor = backendInteractor
	},
	addFetcher (state, { fetcherName, fetcher }) {
	state.fetchers[fetcherName] = fetcher
	},
	removeFetcher (state, { fetcherName, fetcher }) {
	state.fetchers[fetcherName].stop()
	delete state.fetchers[fetcherName]
	},
	setWsToken (state, token) {
	state.wsToken = token
	},
	setSocket (state, socket) {
	state.socket = socket
	},
	setFollowRequests (state, value) {
	state.followRequests = value
	},
	setMastoUserSocketStatus (state, value) {
	state.mastoUserSocketStatus = value
	},
	incrementRetryMultiplier (state) {
	state.retryMultiplier = Math.max(++state.retryMultiplier, 3)
	},
	resetRetryMultiplier (state) {
	state.retryMultiplier = 1
	}
	},
	actions: {
	/**
	* Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
	*
	* @param {Boolean} [initial] - whether this enabling happened at boot time or not
	*/
	enableMastoSockets (store, initial) {
	const { state, dispatch, commit } = store
	// Do not initialize unless nonexistent or closed
	if (
	state.mastoUserSocket &&
	![
	WebSocket.CLOSED,
	WebSocket.CLOSING
	].includes(state.mastoUserSocket.getState())
	) {
	return
	}
	if (initial) {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING_INITIAL)
	} else {
	commit('setMastoUserSocketStatus', WSConnectionStatus.STARTING)
	}
	return dispatch('startMastoUserSocket')
	},
	disableMastoSockets (store) {
	const { state, dispatch, commit } = store
	if (!state.mastoUserSocket) return
	commit('setMastoUserSocketStatus', WSConnectionStatus.DISABLED)
	return dispatch('stopMastoUserSocket')
	},

	// MastoAPI 'User' sockets
	startMastoUserSocket (store) {
	return new Promise((resolve, reject) => {
	try {
	const { state, commit, dispatch, rootState } = store
	const timelineData = rootState.statuses.timelines.friends
	state.mastoUserSocket = state.backendInteractor.startUserSocket({ store })
	state.mastoUserSocket.addEventListener(
	'message',
	({ detail: message }) => {
	if (!message) return // pings
	if (message.event === 'notification') {
	dispatch('addNewNotifications', {
	notifications: [message.notification],
	older: false
	})
	} else if (message.event === 'update') {
	dispatch('addNewStatuses', {
	statuses: [message.status],
	userId: false,
	showImmediately: timelineData.visibleStatuses.length === 0,
	timeline: 'friends'
	})
	} else if (message.event === 'delete') {
	dispatch('deleteStatusById', message.id)
	} else if (message.event === 'pleroma:chat_update') {
	// The setTimeout wrapper is a temporary band-aid to avoid duplicates for the user's own messages when doing optimistic sending.
	// The cause of the duplicates is the WS event arriving earlier than the HTTP response.
	// This setTimeout wrapper can be removed once the commit `8e41baff` is in the stable Pleroma release.
	// (`8e41baff` adds the idempotency key to the chat message entity, which PleromaFE uses when it's available, and it makes this artificial delay unnecessary).
	setTimeout(() => {
	dispatch('addChatMessages', {
	chatId: message.chatUpdate.id,
	messages: [message.chatUpdate.lastMessage]
	})
	dispatch('updateChat', { chat: message.chatUpdate })
	maybeShowChatNotification(store, message.chatUpdate)
	}, 100)
	}
	}
	)
	state.mastoUserSocket.addEventListener('open', () => {
	// Do not show notification when we just opened up the page
	if (state.mastoUserSocketStatus !== WSConnectionStatus.STARTING_INITIAL) {
	dispatch('pushGlobalNotice', {
	level: 'success',
	messageKey: 'timeline.socket_reconnected',
	timeout: 5000
	})
	}
	// Stop polling if we were errored or disabled
	if (new Set([
	WSConnectionStatus.ERROR,
	WSConnectionStatus.DISABLED
	]).has(state.mastoUserSocketStatus)) {
	dispatch('stopFetchingTimeline', { timeline: 'friends' })
	dispatch('stopFetchingNotifications')
	dispatch('stopFetchingChats')
	}
	commit('resetRetryMultiplier')
	commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
	})
	state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
	console.error('Error in MastoAPI websocket:', error)
	// TODO is this needed?
	dispatch('clearOpenedChats')
	})
	state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
	const ignoreCodes = new Set([
	1000, // Normal (intended) closure
	1001 // Going away
	])
	const { code } = closeEvent
	if (ignoreCodes.has(code)) {
	console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
	commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
	} else {
	console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
	setTimeout(() => {
	dispatch('startMastoUserSocket')
	}, retryTimeout(state.retryMultiplier))
	commit('incrementRetryMultiplier')
	if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	dispatch('pushGlobalNotice', {
	level: 'error',
	messageKey: 'timeline.socket_broke',
	messageArgs: [code],
	timeout: 5000
	})
	}
	commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
	}
	dispatch('clearOpenedChats')
	})
	resolve()
	} catch (e) {
	reject(e)
	}
	})
	},
	stopMastoUserSocket ({ state, dispatch }) {
	dispatch('startFetchingTimeline', { timeline: 'friends' })
	dispatch('startFetchingNotifications')
	dispatch('startFetchingChats')
	state.mastoUserSocket.close()
	},

	// Timelines
	startFetchingTimeline (store, {
	timeline = 'friends',
	tag = false,
	- userId = false
	+ userId = false,
	+ listId = false
	}) {
	if (store.state.fetchers[timeline]) return

	const fetcher = store.state.backendInteractor.startFetchingTimeline({
	- timeline, store, userId, tag
	+ timeline, store, userId, listId, tag
	})
	store.commit('addFetcher', { fetcherName: timeline, fetcher })
	},
	stopFetchingTimeline (store, timeline) {
	const fetcher = store.state.fetchers[timeline]
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: timeline, fetcher })
	},
	fetchTimeline (store, timeline, { ...rest }) {
	store.state.backendInteractor.fetchTimeline({
	store,
	timeline,
	...rest
	})
	},

	// Notifications
	startFetchingNotifications (store) {
	if (store.state.fetchers.notifications) return
	const fetcher = store.state.backendInteractor.startFetchingNotifications({ store })
	store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
	},
	stopFetchingNotifications (store) {
	const fetcher = store.state.fetchers.notifications
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
	},
	fetchNotifications (store, { ...rest }) {
	store.state.backendInteractor.fetchNotifications({
	store,
	...rest
	})
	},

	// Follow requests
	startFetchingFollowRequests (store) {
	if (store.state.fetchers.followRequests) return
	const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })

	store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
	},
	stopFetchingFollowRequests (store) {
	const fetcher = store.state.fetchers.followRequests
	if (!fetcher) return
	store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
	},
	removeFollowRequest (store, request) {
	const requests = store.state.followRequests.filter((it) => it !== request)
	store.commit('setFollowRequests', requests)
	},

	+ // Lists
	+ startFetchingLists (store) {
	+ if (store.state.fetchers.lists) return
	+ const fetcher = store.state.backendInteractor.startFetchingLists({ store })
	+ store.commit('addFetcher', { fetcherName: 'lists', fetcher })
	+ },
	+ stopFetchingLists (store) {
	+ const fetcher = store.state.fetchers.lists
	+ if (!fetcher) return
	+ store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
	+ },
	+
	// Pleroma websocket
	setWsToken (store, token) {
	store.commit('setWsToken', token)
	},
	initializeSocket ({ dispatch, commit, state, rootState }) {
	// Set up websocket connection
	const token = state.wsToken
	if (rootState.instance.shoutAvailable && typeof token !== 'undefined' && state.socket === null) {
	const socket = new Socket('/socket', { params: { token } })
	socket.connect()

	commit('setSocket', socket)
	dispatch('initializeShout', socket)
	}
	},
	disconnectFromSocket ({ commit, state }) {
	state.socket && state.socket.disconnect()
	commit('setSocket', null)
	}
	}
	}

	export default api
	diff --git a/src/modules/config.js b/src/modules/config.js
	index eaf67a911d..910fb1722e 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,185 +1,189 @@
	import Cookies from 'js-cookie'
	import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
	import messages from '../i18n/messages'
	import localeService from '../services/locale/locale.service.js'

	const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'

	const browserLocale = (window.navigator.language \|\| 'en').split('-')[0]

	/* TODO this is a bit messy.
	* We need to declare settings with their types and also deal with
	* instance-default settings in some way, hopefully try to avoid copy-pasta
	* in general.
	*/
	export const multiChoiceProperties = [
	'postContentType',
	'subjectLineBehavior',
	'conversationDisplay', // tree \| linear
	'conversationOtherRepliesButton', // below \| inside
	'mentionLinkDisplay' // short \| full_for_remote \| full
	]

	export const defaultState = {
	expertLevel: 0, // used to track which settings to show and hide
	colors: {},
	theme: undefined,
	customTheme: undefined,
	customThemeSource: undefined,
	hideISP: false,
	hideInstanceWallpaper: false,
	hideShoutbox: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	hideMutedThreads: undefined, // instance default
	hideWordFilteredPosts: undefined, // instance default
	muteBotStatuses: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	streaming: false,
	emojiReactionsOnTimeline: true,
	alwaysShowNewPostButton: false,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: true,
	replyVisibility: 'all',
	thirdColumnMode: 'notifications',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	chatMention: true,
	polls: true
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	sidebarRight: undefined, // instance default
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: true,
	disableStickyHeaders: false,
	showScrollbars: false,
	userPopoverZoom: false,
	userPopoverOverlay: true,
	+ sidebarColumnWidth: '25rem',
	+ contentColumnWidth: '45rem',
	+ notifsColumnWidth: '25rem',
	+ listsNavigation: false,
	greentext: undefined, // instance default
	useAtIcon: undefined, // instance default
	mentionLinkDisplay: undefined, // instance default
	mentionLinkShowTooltip: undefined, // instance default
	mentionLinkShowAvatar: undefined, // instance default
	mentionLinkFadeDomain: undefined, // instance default
	mentionLinkShowYous: undefined, // instance default
	mentionLinkBoldenYou: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideBotIndication: undefined, // instance default
	hideUserStats: undefined, // instance default
	virtualScrolling: undefined, // instance default
	sensitiveByDefault: undefined, // instance default
	conversationDisplay: undefined, // instance default
	conversationTreeAdvanced: undefined, // instance default
	conversationOtherRepliesButton: undefined, // instance default
	conversationTreeFadeAncestors: undefined, // instance default
	maxDepthInThread: undefined // instance default
	}

	// caching the instance default properties
	export const instanceDefaultProperties = Object.entries(defaultState)
	.filter(([key, value]) => value === undefined)
	.map(([key, value]) => key)

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map(key => [key, instance[key]])
	)
	}
	},
	mergedConfig (state, getters, rootState, rootGetters) {
	const { defaultConfig } = rootGetters
	return {
	...defaultConfig,
	// Do not override with undefined
	...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
	}
	}
	},
	mutations: {
	setOption (state, { name, value }) {
	state[name] = value
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = { color: color \|\| data.color, type: type \|\| data.type }
	} else {
	delete state.highlight[user]
	}
	}
	},
	actions: {
	loadSettings ({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (const elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach(
	name => dispatch('setOption', { name, value: data[name] })
	)
	},
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOption ({ commit, dispatch }, { name, value }) {
	commit('setOption', { name, value })
	switch (name) {
	case 'theme':
	setPreset(value)
	break
	case 'customTheme':
	case 'customThemeSource':
	applyTheme(value)
	break
	case 'interfaceLanguage':
	messages.setLanguage(this.getters.i18n, value)
	Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
	break
	case 'thirdColumnMode':
	dispatch('setLayoutWidth', undefined)
	break
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/lists.js b/src/modules/lists.js
	new file mode 100644
	index 0000000000..84c1575998
	--- /dev/null
	+++ b/src/modules/lists.js
	@@ -0,0 +1,94 @@
	+import { remove, find } from 'lodash'
	+
	+export const defaultState = {
	+ allLists: [],
	+ allListsObject: {}
	+}
	+
	+export const mutations = {
	+ setLists (state, value) {
	+ state.allLists = value
	+ },
	+ setList (state, { id, title }) {
	+ if (!state.allListsObject[id]) {
	+ state.allListsObject[id] = {}
	+ }
	+ state.allListsObject[id].title = title
	+
	+ if (!find(state.allLists, { id })) {
	+ state.allLists.push({ id, title })
	+ } else {
	+ find(state.allLists, { id }).title = title
	+ }
	+ },
	+ setListAccounts (state, { id, accountIds }) {
	+ if (!state.allListsObject[id]) {
	+ state.allListsObject[id] = {}
	+ }
	+ state.allListsObject[id].accountIds = accountIds
	+ },
	+ deleteList (state, { id }) {
	+ delete state.allListsObject[id]
	+ remove(state.allLists, list => list.id === id)
	+ }
	+}
	+
	+const actions = {
	+ setLists ({ commit }, value) {
	+ commit('setLists', value)
	+ },
	+ createList ({ rootState, commit }, { title }) {
	+ return rootState.api.backendInteractor.createList({ title })
	+ .then((list) => {
	+ commit('setList', { id: list.id, title })
	+ return list
	+ })
	+ },
	+ fetchList ({ rootState, commit }, { id }) {
	+ return rootState.api.backendInteractor.getList({ id })
	+ .then((list) => commit('setList', { id: list.id, title: list.title }))
	+ },
	+ fetchListAccounts ({ rootState, commit }, { id }) {
	+ return rootState.api.backendInteractor.getListAccounts({ id })
	+ .then((accountIds) => commit('setListAccounts', { id, accountIds }))
	+ },
	+ setList ({ rootState, commit }, { id, title }) {
	+ rootState.api.backendInteractor.updateList({ id, title })
	+ commit('setList', { id, title })
	+ },
	+ setListAccounts ({ rootState, commit }, { id, accountIds }) {
	+ const saved = rootState.lists.allListsObject[id].accountIds \|\| []
	+ const added = accountIds.filter(id => !saved.includes(id))
	+ const removed = saved.filter(id => !accountIds.includes(id))
	+ commit('setListAccounts', { id, accountIds })
	+ if (added.length > 0) {
	+ rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
	+ }
	+ if (removed.length > 0) {
	+ rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
	+ }
	+ },
	+ deleteList ({ rootState, commit }, { id }) {
	+ rootState.api.backendInteractor.deleteList({ id })
	+ commit('deleteList', { id })
	+ }
	+}
	+
	+export const getters = {
	+ findListTitle: state => id => {
	+ if (!state.allListsObject[id]) return
	+ return state.allListsObject[id].title
	+ },
	+ findListAccounts: state => id => {
	+ return [...state.allListsObject[id].accountIds]
	+ }
	+}
	+
	+const lists = {
	+ state: defaultState,
	+ mutations,
	+ actions,
	+ getters
	+}
	+
	+export default lists
	diff --git a/src/modules/statuses.js b/src/modules/statuses.js
	index 62251b0bc2..c4475005fc 100644
	--- a/src/modules/statuses.js
	+++ b/src/modules/statuses.js
	@@ -1,765 +1,766 @@
	import {
	remove,
	slice,
	each,
	findIndex,
	find,
	maxBy,
	minBy,
	merge,
	first,
	last,
	isArray,
	omitBy
	} from 'lodash'
	import {
	isStatusNotification,
	isValidNotification,
	maybeShowNotification
	} from '../services/notification_utils/notification_utils.js'
	import apiService from '../services/api/api.service.js'

	const emptyTl = (userId = 0) => ({
	statuses: [],
	statusesObject: {},
	faves: [],
	visibleStatuses: [],
	visibleStatusesObject: {},
	newStatusCount: 0,
	maxId: 0,
	minId: 0,
	minVisibleId: 0,
	loading: false,
	followers: [],
	friends: [],
	userId,
	flushMarker: 0
	})

	const emptyNotifications = () => ({
	desktopNotificationSilence: true,
	maxId: 0,
	minId: Number.POSITIVE_INFINITY,
	data: [],
	idStore: {},
	loading: false
	})

	export const defaultState = () => ({
	allStatuses: [],
	allStatusesObject: {},
	conversationsObject: {},
	maxId: 0,
	notifications: emptyNotifications(),
	favorites: new Set(),
	timelines: {
	mentions: emptyTl(),
	public: emptyTl(),
	user: emptyTl(),
	favorites: emptyTl(),
	media: emptyTl(),
	publicAndExternal: emptyTl(),
	friends: emptyTl(),
	tag: emptyTl(),
	dms: emptyTl(),
	- bookmarks: emptyTl()
	+ bookmarks: emptyTl(),
	+ list: emptyTl()
	}
	})

	export const prepareStatus = (status) => {
	// Set deleted flag
	status.deleted = false

	// To make the array reactive
	status.attachments = status.attachments \|\| []

	return status
	}

	const mergeOrAdd = (arr, obj, item) => {
	const oldItem = obj[item.id]

	if (oldItem) {
	// We already have this, so only merge the new info.
	// We ignore null values to avoid overwriting existing properties with missing data
	// we also skip 'user' because that is handled by users module
	merge(oldItem, omitBy(item, (v, k) => v === null \|\| k === 'user'))
	// Reactivity fix.
	oldItem.attachments.splice(oldItem.attachments.length)
	return { item: oldItem, new: false }
	} else {
	// This is a new item, prepare it
	prepareStatus(item)
	arr.push(item)
	obj[item.id] = item
	return { item, new: true }
	}
	}

	const sortById = (a, b) => {
	const seqA = Number(a.id)
	const seqB = Number(b.id)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA > seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return 1
	} else if (!isSeqA && isSeqB) {
	return -1
	} else {
	return a.id > b.id ? -1 : 1
	}
	}

	const sortTimeline = (timeline) => {
	timeline.visibleStatuses = timeline.visibleStatuses.sort(sortById)
	timeline.statuses = timeline.statuses.sort(sortById)
	timeline.minVisibleId = (last(timeline.visibleStatuses) \|\| {}).id
	return timeline
	}

	// Add status to the global storages (arrays and objects maintaining statuses) except timelines
	const addStatusToGlobalStorage = (state, data) => {
	const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
	if (result.new) {
	// Add to conversation
	const status = result.item
	const conversationsObject = state.conversationsObject
	const conversationId = status.statusnet_conversation_id
	if (conversationsObject[conversationId]) {
	conversationsObject[conversationId].push(status)
	} else {
	conversationsObject[conversationId] = [status]
	}
	}
	return result
	}

	// Remove status from the global storages (arrays and objects maintaining statuses) except timelines
	const removeStatusFromGlobalStorage = (state, status) => {
	remove(state.allStatuses, { id: status.id })

	// TODO: Need to remove from allStatusesObject?

	// Remove possible notification
	remove(state.notifications.data, ({ action: { id } }) => id === status.id)

	// Remove from conversation
	const conversationId = status.statusnet_conversation_id
	if (state.conversationsObject[conversationId]) {
	remove(state.conversationsObject[conversationId], { id: status.id })
	}
	}

	const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId, pagination = {} }) => {
	// Sanity check
	if (!isArray(statuses)) {
	return false
	}

	const allStatuses = state.allStatuses
	const timelineObject = state.timelines[timeline]

	// Mismatch between API pagination and our internal minId/maxId tracking systems:
	// pagination.maxId is the oldest of the returned statuses when fetching older,
	// and pagination.minId is the newest when fetching newer. The names come directly
	// from the arguments they're supposed to be passed as for the next fetch.
	const minNew = pagination.maxId \|\| (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
	const maxNew = pagination.minId \|\| (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)

	const newer = timeline && (maxNew > timelineObject.maxId \|\| timelineObject.maxId === 0) && statuses.length > 0
	const older = timeline && (minNew < timelineObject.minId \|\| timelineObject.minId === 0) && statuses.length > 0

	if (!noIdUpdate && newer) {
	timelineObject.maxId = maxNew
	}
	if (!noIdUpdate && older) {
	timelineObject.minId = minNew
	}

	// This makes sure that user timeline won't get data meant for other
	// user. I.e. opening different user profiles makes request which could
	// return data late after user already viewing different user profile
	if ((timeline === 'user' \|\| timeline === 'media') && timelineObject.userId !== userId) {
	return
	}

	const addStatus = (data, showImmediately, addToTimeline = true) => {
	const result = addStatusToGlobalStorage(state, data)
	const status = result.item

	if (result.new) {
	// We are mentioned in a post
	if (status.type === 'status' && find(status.attentions, { id: user.id })) {
	const mentions = state.timelines.mentions

	// Add the mention to the mentions timeline
	if (timelineObject !== mentions) {
	mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
	mentions.newStatusCount += 1

	sortTimeline(mentions)
	}
	}
	if (status.visibility === 'direct') {
	const dms = state.timelines.dms

	mergeOrAdd(dms.statuses, dms.statusesObject, status)
	dms.newStatusCount += 1

	sortTimeline(dms)
	}
	}

	// Decide if we should treat the status as new for this timeline.
	let resultForCurrentTimeline
	// Some statuses should only be added to the global status repository.
	if (timeline && addToTimeline) {
	resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, timelineObject.statusesObject, status)
	}

	if (timeline && showImmediately) {
	// Add it directly to the visibleStatuses, don't change
	// newStatusCount
	mergeOrAdd(timelineObject.visibleStatuses, timelineObject.visibleStatusesObject, status)
	} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
	// Just change newStatuscount
	timelineObject.newStatusCount += 1
	}

	return status
	}

	const favoriteStatus = (favorite, counter) => {
	const status = find(allStatuses, { id: favorite.in_reply_to_status_id })
	if (status) {
	// This is our favorite, so the relevant bit.
	if (favorite.user.id === user.id) {
	status.favorited = true
	} else {
	status.fave_num += 1
	}
	}
	return status
	}

	const processors = {
	status: (status) => {
	addStatus(status, showImmediately)
	},
	retweet: (status) => {
	// RetweetedStatuses are never shown immediately
	const retweetedStatus = addStatus(status.retweeted_status, false, false)

	let retweet
	// If the retweeted status is already there, don't add the retweet
	// to the timeline.
	if (timeline && find(timelineObject.statuses, (s) => {
	if (s.retweeted_status) {
	return s.id === retweetedStatus.id \|\| s.retweeted_status.id === retweetedStatus.id
	} else {
	return s.id === retweetedStatus.id
	}
	})) {
	// Already have it visible (either as the original or another RT), don't add to timeline, don't show.
	retweet = addStatus(status, false, false)
	} else {
	retweet = addStatus(status, showImmediately)
	}

	retweet.retweeted_status = retweetedStatus
	},
	favorite: (favorite) => {
	// Only update if this is a new favorite.
	// Ignore our own favorites because we get info about likes as response to like request
	if (!state.favorites.has(favorite.id)) {
	state.favorites.add(favorite.id)
	favoriteStatus(favorite)
	}
	},
	deletion: (deletion) => {
	const uri = deletion.uri
	const status = find(allStatuses, { uri })
	if (!status) {
	return
	}

	removeStatusFromGlobalStorage(state, status)

	if (timeline) {
	remove(timelineObject.statuses, { uri })
	remove(timelineObject.visibleStatuses, { uri })
	}
	},
	follow: (follow) => {
	// NOOP, it is known status but we don't do anything about it for now
	},
	default: (unknown) => {
	console.log('unknown status type')
	console.log(unknown)
	}
	}

	each(statuses, (status) => {
	const type = status.type
	const processor = processors[type] \|\| processors.default
	processor(status)
	})

	// Keep the visible statuses sorted
	if (timeline && !(timeline === 'bookmarks')) {
	sortTimeline(timelineObject)
	}
	}

	const updateNotificationsMinMaxId = (state, notification) => {
	state.notifications.maxId = notification.id > state.notifications.maxId
	? notification.id
	: state.notifications.maxId
	state.notifications.minId = notification.id < state.notifications.minId
	? notification.id
	: state.notifications.minId
	}

	const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters, newNotificationSideEffects }) => {
	each(notifications, (notification) => {
	// If invalid notification, update ids but don't add it to store
	if (!isValidNotification(notification)) {
	console.error('Invalid notification:', notification)
	updateNotificationsMinMaxId(state, notification)
	return
	}

	if (isStatusNotification(notification.type)) {
	notification.action = addStatusToGlobalStorage(state, notification.action).item
	notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
	}

	if (notification.type === 'pleroma:emoji_reaction') {
	dispatch('fetchEmojiReactionsBy', notification.status.id)
	}

	// Only add a new notification if we don't have one for the same action
	// eslint-disable-next-line no-prototype-builtins
	if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
	updateNotificationsMinMaxId(state, notification)

	state.notifications.data.push(notification)
	state.notifications.idStore[notification.id] = notification

	newNotificationSideEffects(notification)
	} else if (notification.seen) {
	state.notifications.idStore[notification.id].seen = true
	}
	})
	}

	const removeStatus = (state, { timeline, userId }) => {
	const timelineObject = state.timelines[timeline]
	if (userId) {
	remove(timelineObject.statuses, { user: { id: userId } })
	remove(timelineObject.visibleStatuses, { user: { id: userId } })
	timelineObject.minVisibleId = timelineObject.visibleStatuses.length > 0 ? last(timelineObject.visibleStatuses).id : 0
	timelineObject.maxId = timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
	}
	}

	export const mutations = {
	addNewStatuses,
	addNewNotifications,
	removeStatus,
	showNewStatuses (state, { timeline }) {
	const oldTimeline = (state.timelines[timeline])

	oldTimeline.newStatusCount = 0
	oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
	oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
	oldTimeline.minId = oldTimeline.minVisibleId
	oldTimeline.visibleStatusesObject = {}
	each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
	},
	resetStatuses (state) {
	const emptyState = defaultState()
	Object.entries(emptyState).forEach(([key, value]) => {
	state[key] = value
	})
	},
	clearTimeline (state, { timeline, excludeUserId = false }) {
	const userId = excludeUserId ? state.timelines[timeline].userId : undefined
	state.timelines[timeline] = emptyTl(userId)
	},
	clearNotifications (state) {
	state.notifications = emptyNotifications()
	},
	setFavorited (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.favorited !== value) {
	if (value) {
	newStatus.fave_num++
	} else {
	newStatus.fave_num--
	}
	}

	newStatus.favorited = value
	},
	setFavoritedConfirm (state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.favorited = status.favorited
	newStatus.fave_num = status.fave_num
	const index = findIndex(newStatus.favoritedBy, { id: user.id })
	if (index !== -1 && !newStatus.favorited) {
	newStatus.favoritedBy.splice(index, 1)
	} else if (index === -1 && newStatus.favorited) {
	newStatus.favoritedBy.push(user)
	}
	},
	setMutedStatus (state, status) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.thread_muted = status.thread_muted

	if (newStatus.thread_muted !== undefined) {
	state.conversationsObject[newStatus.statusnet_conversation_id].forEach(status => { status.thread_muted = newStatus.thread_muted })
	}
	},
	setRetweeted (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]

	if (newStatus.repeated !== value) {
	if (value) {
	newStatus.repeat_num++
	} else {
	newStatus.repeat_num--
	}
	}

	newStatus.repeated = value
	},
	setRetweetedConfirm (state, { status, user }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.repeated = status.repeated
	newStatus.repeat_num = status.repeat_num
	const index = findIndex(newStatus.rebloggedBy, { id: user.id })
	if (index !== -1 && !newStatus.repeated) {
	newStatus.rebloggedBy.splice(index, 1)
	} else if (index === -1 && newStatus.repeated) {
	newStatus.rebloggedBy.push(user)
	}
	},
	setBookmarked (state, { status, value }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = value
	},
	setBookmarkedConfirm (state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	newStatus.bookmarked = status.bookmarked
	},
	setDeleted (state, { status }) {
	const newStatus = state.allStatusesObject[status.id]
	if (newStatus) newStatus.deleted = true
	},
	setManyDeleted (state, condition) {
	Object.values(state.allStatusesObject).forEach(status => {
	if (condition(status)) {
	status.deleted = true
	}
	})
	},
	setLoading (state, { timeline, value }) {
	state.timelines[timeline].loading = value
	},
	setNsfw (state, { id, nsfw }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.nsfw = nsfw
	},
	setNotificationsLoading (state, { value }) {
	state.notifications.loading = value
	},
	setNotificationsSilence (state, { value }) {
	state.notifications.desktopNotificationSilence = value
	},
	markNotificationsAsSeen (state) {
	each(state.notifications.data, (notification) => {
	notification.seen = true
	})
	},
	markSingleNotificationAsSeen (state, { id }) {
	const notification = find(state.notifications.data, n => n.id === id)
	if (notification) notification.seen = true
	},
	dismissNotification (state, { id }) {
	state.notifications.data = state.notifications.data.filter(n => n.id !== id)
	},
	dismissNotifications (state, { finder }) {
	state.notifications.data = state.notifications.data.filter(n => finder)
	},
	updateNotification (state, { id, updater }) {
	const notification = find(state.notifications.data, n => n.id === id)
	notification && updater(notification)
	},
	queueFlush (state, { timeline, id }) {
	state.timelines[timeline].flushMarker = id
	},
	queueFlushAll (state) {
	Object.keys(state.timelines).forEach((timeline) => {
	state.timelines[timeline].flushMarker = state.timelines[timeline].maxId
	})
	},
	addRepeats (state, { id, rebloggedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.rebloggedBy = rebloggedByUsers.filter(_ => _)
	// repeats stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.repeat_num = newStatus.rebloggedBy.length
	newStatus.repeated = !!newStatus.rebloggedBy.find(({ id }) => currentUser.id === id)
	},
	addFavs (state, { id, favoritedByUsers, currentUser }) {
	const newStatus = state.allStatusesObject[id]
	newStatus.favoritedBy = favoritedByUsers.filter(_ => _)
	// favorites stats can be incorrect based on polling condition, let's update them using the most recent data
	newStatus.fave_num = newStatus.favoritedBy.length
	newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
	},
	addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
	const status = state.allStatusesObject[id]
	status.emoji_reactions = emojiReactions
	},
	addOwnReaction (state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	const reaction = status.emoji_reactions[reactionIndex] \|\| { name: emoji, count: 0, accounts: [] }

	const newReaction = {
	...reaction,
	count: reaction.count + 1,
	me: true,
	accounts: [
	...reaction.accounts,
	currentUser
	]
	}

	// Update count of existing reaction if it exists, otherwise append at the end
	if (reactionIndex >= 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = [...status.emoji_reactions, newReaction]
	}
	},
	removeOwnReaction (state, { id, emoji, currentUser }) {
	const status = state.allStatusesObject[id]
	const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
	if (reactionIndex < 0) return

	const reaction = status.emoji_reactions[reactionIndex]
	const accounts = reaction.accounts \|\| []

	const newReaction = {
	...reaction,
	count: reaction.count - 1,
	me: false,
	accounts: accounts.filter(acc => acc.id !== currentUser.id)
	}

	if (newReaction.count > 0) {
	status.emoji_reactions[reactionIndex] = newReaction
	} else {
	status.emoji_reactions = status.emoji_reactions.filter(r => r.name !== emoji)
	}
	},
	updateStatusWithPoll (state, { id, poll }) {
	const status = state.allStatusesObject[id]
	status.poll = poll
	},
	setVirtualHeight (state, { statusId, height }) {
	state.allStatusesObject[statusId].virtualHeight = height
	}
	}

	const statuses = {
	state: defaultState(),
	actions: {
	addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
	commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId, pagination })
	},
	addNewNotifications (store, { notifications, older }) {
	const { commit, dispatch, rootGetters } = store

	const newNotificationSideEffects = (notification) => {
	maybeShowNotification(store, notification)
	}
	commit('addNewNotifications', { dispatch, notifications, older, rootGetters, newNotificationSideEffects })
	},
	setNotificationsLoading ({ rootState, commit }, { value }) {
	commit('setNotificationsLoading', { value })
	},
	setNotificationsSilence ({ rootState, commit }, { value }) {
	commit('setNotificationsSilence', { value })
	},
	fetchStatus ({ rootState, dispatch }, id) {
	return rootState.api.backendInteractor.fetchStatus({ id })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	deleteStatus ({ rootState, commit }, status) {
	commit('setDeleted', { status })
	apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
	},
	deleteStatusById ({ rootState, commit }, id) {
	const status = rootState.statuses.allStatusesObject[id]
	commit('setDeleted', { status })
	},
	markStatusesAsDeleted ({ commit }, condition) {
	commit('setManyDeleted', condition)
	},
	favorite ({ rootState, commit }, status) {
	// Optimistic favoriting...
	commit('setFavorited', { status, value: true })
	rootState.api.backendInteractor.favorite({ id: status.id })
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	unfavorite ({ rootState, commit }, status) {
	// Optimistic unfavoriting...
	commit('setFavorited', { status, value: false })
	rootState.api.backendInteractor.unfavorite({ id: status.id })
	.then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
	},
	fetchPinnedStatuses ({ rootState, dispatch }, userId) {
	rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
	.then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
	},
	pinStatus ({ rootState, dispatch }, statusId) {
	return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	unpinStatus ({ rootState, dispatch }, statusId) {
	rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
	.then((status) => dispatch('addNewStatuses', { statuses: [status] }))
	},
	muteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.muteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	unmuteConversation ({ rootState, commit }, statusId) {
	return rootState.api.backendInteractor.unmuteConversation({ id: statusId })
	.then((status) => commit('setMutedStatus', status))
	},
	retweet ({ rootState, commit }, status) {
	// Optimistic retweeting...
	commit('setRetweeted', { status, value: true })
	rootState.api.backendInteractor.retweet({ id: status.id })
	.then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
	},
	unretweet ({ rootState, commit }, status) {
	// Optimistic unretweeting...
	commit('setRetweeted', { status, value: false })
	rootState.api.backendInteractor.unretweet({ id: status.id })
	.then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser }))
	},
	bookmark ({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: true })
	rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
	.then(status => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	unbookmark ({ rootState, commit }, status) {
	commit('setBookmarked', { status, value: false })
	rootState.api.backendInteractor.unbookmarkStatus({ id: status.id })
	.then(status => {
	commit('setBookmarkedConfirm', { status })
	})
	},
	queueFlush ({ rootState, commit }, { timeline, id }) {
	commit('queueFlush', { timeline, id })
	},
	queueFlushAll ({ rootState, commit }) {
	commit('queueFlushAll')
	},
	markNotificationsAsSeen ({ rootState, commit }) {
	commit('markNotificationsAsSeen')
	apiService.markNotificationsAsSeen({
	id: rootState.statuses.notifications.maxId,
	credentials: rootState.users.currentUser.credentials
	})
	},
	markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
	commit('markSingleNotificationAsSeen', { id })
	apiService.markNotificationsAsSeen({
	single: true,
	id,
	credentials: rootState.users.currentUser.credentials
	})
	},
	dismissNotificationLocal ({ rootState, commit }, { id }) {
	commit('dismissNotification', { id })
	},
	dismissNotification ({ rootState, commit }, { id }) {
	commit('dismissNotification', { id })
	rootState.api.backendInteractor.dismissNotification({ id })
	},
	updateNotification ({ rootState, commit }, { id, updater }) {
	commit('updateNotification', { id, updater })
	},
	fetchFavsAndRepeats ({ rootState, commit }, id) {
	Promise.all([
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
	]).then(([favoritedByUsers, rebloggedByUsers]) => {
	commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser })
	commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
	})
	},
	reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('addOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
	ok => {
	dispatch('fetchEmojiReactionsBy', id)
	}
	)
	},
	unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
	const currentUser = rootState.users.currentUser
	if (!currentUser) return

	commit('removeOwnReaction', { id, emoji, currentUser })
	rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
	ok => {
	dispatch('fetchEmojiReactionsBy', id)
	}
	)
	},
	fetchEmojiReactionsBy ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
	emojiReactions => {
	commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
	}
	)
	},
	fetchFavs ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchFavoritedByUsers({ id })
	.then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
	},
	fetchRepeats ({ rootState, commit }, id) {
	rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
	.then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
	},
	search (store, { q, resolve, limit, offset, following }) {
	return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following })
	.then((data) => {
	store.commit('addNewUsers', data.accounts)
	store.commit('addNewStatuses', { statuses: data.statuses })
	return data
	})
	},
	setVirtualHeight ({ commit }, { statusId, height }) {
	commit('setVirtualHeight', { statusId, height })
	}
	},
	mutations
	}

	export default statuses
	diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
	index 7b7fbefdeb..86d9eaf4b1 100644
	--- a/src/services/api/api.service.js
	+++ b/src/services/api/api.service.js
	@@ -1,1436 +1,1529 @@
	import { each, map, concat, last, get } from 'lodash'
	import { parseStatus, parseUser, parseNotification, parseAttachment, parseChat, parseLinkHeaderPagination } from '../entity_normalizer/entity_normalizer.service.js'
	import { RegistrationError, StatusCodeError } from '../errors/errors'

	/* eslint-env browser */
	const MUTES_IMPORT_URL = '/api/pleroma/mutes_import'
	const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
	const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
	const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
	const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
	const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
	const MOVE_ACCOUNT_URL = '/api/pleroma/move_account'
	const ALIASES_URL = '/api/pleroma/aliases'
	const TAG_USER_URL = '/api/pleroma/admin/users/tag'
	const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
	const ACTIVATE_USER_URL = '/api/pleroma/admin/users/activate'
	const DEACTIVATE_USER_URL = '/api/pleroma/admin/users/deactivate'
	const ADMIN_USERS_URL = '/api/pleroma/admin/users'
	const SUGGESTIONS_URL = '/api/v1/suggestions'
	const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
	const NOTIFICATION_READ_URL = '/api/v1/pleroma/notifications/read'

	const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
	const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'

	const MFA_SETUP_OTP_URL = '/api/pleroma/accounts/mfa/setup/totp'
	const MFA_CONFIRM_OTP_URL = '/api/pleroma/accounts/mfa/confirm/totp'
	const MFA_DISABLE_OTP_URL = '/api/pleroma/accounts/mfa/totp'

	const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
	const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
	const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
	const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
	const MASTODON_DISMISS_NOTIFICATION_URL = id => `/api/v1/notifications/${id}/dismiss`
	const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
	const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
	const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
	const MASTODON_UNRETWEET_URL = id => `/api/v1/statuses/${id}/unreblog`
	const MASTODON_DELETE_URL = id => `/api/v1/statuses/${id}`
	const MASTODON_FOLLOW_URL = id => `/api/v1/accounts/${id}/follow`
	const MASTODON_UNFOLLOW_URL = id => `/api/v1/accounts/${id}/unfollow`
	const MASTODON_FOLLOWING_URL = id => `/api/v1/accounts/${id}/following`
	const MASTODON_FOLLOWERS_URL = id => `/api/v1/accounts/${id}/followers`
	const MASTODON_FOLLOW_REQUESTS_URL = '/api/v1/follow_requests'
	const MASTODON_APPROVE_USER_URL = id => `/api/v1/follow_requests/${id}/authorize`
	const MASTODON_DENY_USER_URL = id => `/api/v1/follow_requests/${id}/reject`
	const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct'
	const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
	const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
	const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
	const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
	const MASTODON_USER_URL = '/api/v1/accounts'
	const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
	const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
	+const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
	+const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
	+const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
	const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
	const MASTODON_BOOKMARK_TIMELINE_URL = '/api/v1/bookmarks'
	const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
	const MASTODON_USER_MUTES_URL = '/api/v1/mutes/'
	const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block`
	const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
	const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
	const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
	const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
	const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
	const MASTODON_BOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/bookmark`
	const MASTODON_UNBOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/unbookmark`
	const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
	const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
	const MASTODON_VOTE_URL = id => `/api/v1/polls/${id}/votes`
	const MASTODON_POLL_URL = id => `/api/v1/polls/${id}`
	const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by`
	const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by`
	const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
	const MASTODON_REPORT_USER_URL = '/api/v1/reports'
	const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
	const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
	const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
	const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
	const MASTODON_SEARCH_2 = '/api/v2/search'
	const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
	const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
	+const MASTODON_LISTS_URL = '/api/v1/lists'
	const MASTODON_STREAMING = '/api/v1/streaming'
	const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
	const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
	const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
	const PLEROMA_CHATS_URL = '/api/v1/pleroma/chats'
	const PLEROMA_CHAT_URL = id => `/api/v1/pleroma/chats/by-account-id/${id}`
	const PLEROMA_CHAT_MESSAGES_URL = id => `/api/v1/pleroma/chats/${id}/messages`
	const PLEROMA_CHAT_READ_URL = id => `/api/v1/pleroma/chats/${id}/read`
	const PLEROMA_DELETE_CHAT_MESSAGE_URL = (chatId, messageId) => `/api/v1/pleroma/chats/${chatId}/messages/${messageId}`
	const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'

	const oldfetch = window.fetch

	const fetch = (url, options) => {
	options = options \|\| {}
	const baseUrl = ''
	const fullUrl = baseUrl + url
	options.credentials = 'same-origin'
	return oldfetch(fullUrl, options)
	}

	const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => {
	const options = {
	method,
	headers: {
	Accept: 'application/json',
	'Content-Type': 'application/json',
	...headers
	}
	}
	if (params) {
	url += '?' + Object.entries(params)
	.map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value))
	.join('&')
	}
	if (payload) {
	options.body = JSON.stringify(payload)
	}
	if (credentials) {
	options.headers = {
	...options.headers,
	...authHeaders(credentials)
	}
	}
	return fetch(url, options)
	.then((response) => {
	return new Promise((resolve, reject) => response.json()
	.then((json) => {
	if (!response.ok) {
	return reject(new StatusCodeError(response.status, json, { url, options }, response))
	}
	return resolve(json)
	})
	.catch((error) => {
	return reject(new StatusCodeError(response.status, error, { url, options }, response))
	})
	)
	})
	}

	const updateNotificationSettings = ({ credentials, settings }) => {
	const form = new FormData()

	each(settings, (value, key) => {
	form.append(key, value)
	})

	return fetch(NOTIFICATION_SETTINGS_URL, {
	headers: authHeaders(credentials),
	method: 'PUT',
	body: form
	}).then((data) => data.json())
	}

	const updateProfileImages = ({ credentials, avatar = null, avatarName = null, banner = null, background = null }) => {
	const form = new FormData()
	if (avatar !== null) {
	if (avatarName !== null) {
	form.append('avatar', avatar, avatarName)
	} else {
	form.append('avatar', avatar)
	}
	}
	if (banner !== null) form.append('header', banner)
	if (background !== null) form.append('pleroma_background_image', background)
	return fetch(MASTODON_PROFILE_UPDATE_URL, {
	headers: authHeaders(credentials),
	method: 'PATCH',
	body: form
	})
	.then((data) => data.json())
	.then((data) => {
	if (data.error) {
	throw new Error(data.error)
	}
	return parseUser(data)
	})
	}

	const updateProfile = ({ credentials, params }) => {
	return promisedRequest({
	url: MASTODON_PROFILE_UPDATE_URL,
	method: 'PATCH',
	payload: params,
	credentials
	}).then((data) => parseUser(data))
	}

	// Params needed:
	// nickname
	// email
	// fullname
	// password
	// password_confirm
	//
	// Optional
	// bio
	// homepage
	// location
	// token
	// language
	const register = ({ params, credentials }) => {
	const { nickname, ...rest } = params
	return fetch(MASTODON_REGISTRATION_URL, {
	method: 'POST',
	headers: {
	...authHeaders(credentials),
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	nickname,
	locale: 'en_US',
	agreement: true,
	...rest
	})
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return response.json().then((error) => { throw new RegistrationError(error) })
	}
	})
	}

	const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())

	const authHeaders = (accessToken) => {
	if (accessToken) {
	return { Authorization: `Bearer ${accessToken}` }
	} else {
	return { }
	}
	}

	const followUser = ({ id, credentials, ...options }) => {
	const url = MASTODON_FOLLOW_URL(id)
	const form = {}
	if (options.reblogs !== undefined) { form.reblogs = options.reblogs }
	return fetch(url, {
	body: JSON.stringify(form),
	headers: {
	...authHeaders(credentials),
	'Content-Type': 'application/json'
	},
	method: 'POST'
	}).then((data) => data.json())
	}

	const unfollowUser = ({ id, credentials }) => {
	const url = MASTODON_UNFOLLOW_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const pinOwnStatus = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const unpinOwnStatus = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNPIN_OWN_STATUS(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const muteConversation = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_MUTE_CONVERSATION(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const unmuteConversation = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNMUTE_CONVERSATION(id), credentials, method: 'POST' })
	.then((data) => parseStatus(data))
	}

	const blockUser = ({ id, credentials }) => {
	return fetch(MASTODON_BLOCK_USER_URL(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const unblockUser = ({ id, credentials }) => {
	return fetch(MASTODON_UNBLOCK_USER_URL(id), {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const approveUser = ({ id, credentials }) => {
	const url = MASTODON_APPROVE_USER_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const denyUser = ({ id, credentials }) => {
	const url = MASTODON_DENY_USER_URL(id)
	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const fetchUser = ({ id, credentials }) => {
	const url = `${MASTODON_USER_URL}/${id}`
	return promisedRequest({ url, credentials })
	.then((data) => parseUser(data))
	}

	const fetchUserRelationship = ({ id, credentials }) => {
	const url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
	return fetch(url, { headers: authHeaders(credentials) })
	.then((response) => {
	return new Promise((resolve, reject) => response.json()
	.then((json) => {
	if (!response.ok) {
	return reject(new StatusCodeError(response.status, json, { url }, response))
	}
	return resolve(json)
	}))
	})
	}

	const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWING_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`,
	'with_relationships=true'
	].filter(_ => _).join('&')

	url = url + (args ? '?' + args : '')
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const exportFriends = ({ id, credentials }) => {
	// eslint-disable-next-line no-async-promise-executor
	return new Promise(async (resolve, reject) => {
	try {
	let friends = []
	let more = true
	while (more) {
	const maxId = friends.length > 0 ? last(friends).id : undefined
	const users = await fetchFriends({ id, maxId, credentials })
	friends = concat(friends, users)
	if (users.length === 0) {
	more = false
	}
	}
	resolve(friends)
	} catch (err) {
	reject(err)
	}
	})
	}

	const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
	let url = MASTODON_FOLLOWERS_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`,
	'with_relationships=true'
	].filter(_ => _).join('&')

	url += args ? '?' + args : ''
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	const fetchFollowRequests = ({ credentials }) => {
	const url = MASTODON_FOLLOW_REQUESTS_URL
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => data.map(parseUser))
	}

	+const fetchLists = ({ credentials }) => {
	+ const url = MASTODON_LISTS_URL
	+ return fetch(url, { headers: authHeaders(credentials) })
	+ .then((data) => data.json())
	+}
	+
	+const createList = ({ title, credentials }) => {
	+ const url = MASTODON_LISTS_URL
	+ const headers = authHeaders(credentials)
	+ headers['Content-Type'] = 'application/json'
	+
	+ return fetch(url, {
	+ headers,
	+ method: 'POST',
	+ body: JSON.stringify({ title })
	+ }).then((data) => data.json())
	+}
	+
	+const getList = ({ id, credentials }) => {
	+ const url = MASTODON_LIST_URL(id)
	+ return fetch(url, { headers: authHeaders(credentials) })
	+ .then((data) => data.json())
	+}
	+
	+const updateList = ({ id, title, credentials }) => {
	+ const url = MASTODON_LIST_URL(id)
	+ const headers = authHeaders(credentials)
	+ headers['Content-Type'] = 'application/json'
	+
	+ return fetch(url, {
	+ headers,
	+ method: 'PUT',
	+ body: JSON.stringify({ title })
	+ })
	+}
	+
	+const getListAccounts = ({ id, credentials }) => {
	+ const url = MASTODON_LIST_ACCOUNTS_URL(id)
	+ return fetch(url, { headers: authHeaders(credentials) })
	+ .then((data) => data.json())
	+ .then((data) => data.map(({ id }) => id))
	+}
	+
	+const addAccountsToList = ({ id, accountIds, credentials }) => {
	+ const url = MASTODON_LIST_ACCOUNTS_URL(id)
	+ const headers = authHeaders(credentials)
	+ headers['Content-Type'] = 'application/json'
	+
	+ return fetch(url, {
	+ headers,
	+ method: 'POST',
	+ body: JSON.stringify({ account_ids: accountIds })
	+ })
	+}
	+
	+const removeAccountsFromList = ({ id, accountIds, credentials }) => {
	+ const url = MASTODON_LIST_ACCOUNTS_URL(id)
	+ const headers = authHeaders(credentials)
	+ headers['Content-Type'] = 'application/json'
	+
	+ return fetch(url, {
	+ headers,
	+ method: 'DELETE',
	+ body: JSON.stringify({ account_ids: accountIds })
	+ })
	+}
	+
	+const deleteList = ({ id, credentials }) => {
	+ const url = MASTODON_LIST_URL(id)
	+ return fetch(url, {
	+ method: 'DELETE',
	+ headers: authHeaders(credentials)
	+ })
	+}
	+
	const fetchConversation = ({ id, credentials }) => {
	const urlContext = MASTODON_STATUS_CONTEXT_URL(id)
	return fetch(urlContext, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then(({ ancestors, descendants }) => ({
	ancestors: ancestors.map(parseStatus),
	descendants: descendants.map(parseStatus)
	}))
	}

	const fetchStatus = ({ id, credentials }) => {
	const url = MASTODON_STATUS_URL(id)
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching timeline', data)
	})
	.then((data) => data.json())
	.then((data) => parseStatus(data))
	}

	const tagUser = ({ tag, credentials, user }) => {
	const screenName = user.screen_name
	const form = {
	nicknames: [screenName],
	tags: [tag]
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(TAG_USER_URL, {
	method: 'PUT',
	headers,
	body: JSON.stringify(form)
	})
	}

	const untagUser = ({ tag, credentials, user }) => {
	const screenName = user.screen_name
	const body = {
	nicknames: [screenName],
	tags: [tag]
	}

	const headers = authHeaders(credentials)
	headers['Content-Type'] = 'application/json'

	return fetch(TAG_USER_URL, {
	method: 'DELETE',
	headers,
	body: JSON.stringify(body)
	})
	}

	const addRight = ({ right, credentials, user }) => {
	const screenName = user.screen_name

	return fetch(PERMISSION_GROUP_URL(screenName, right), {
	method: 'POST',
	headers: authHeaders(credentials),
	body: {}
	})
	}

	const deleteRight = ({ right, credentials, user }) => {
	const screenName = user.screen_name

	return fetch(PERMISSION_GROUP_URL(screenName, right), {
	method: 'DELETE',
	headers: authHeaders(credentials),
	body: {}
	})
	}

	const activateUser = ({ credentials, user: { screen_name: nickname } }) => {
	return promisedRequest({
	url: ACTIVATE_USER_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames: [nickname]
	}
	}).then(response => get(response, 'users.0'))
	}

	const deactivateUser = ({ credentials, user: { screen_name: nickname } }) => {
	return promisedRequest({
	url: DEACTIVATE_USER_URL,
	method: 'PATCH',
	credentials,
	payload: {
	nicknames: [nickname]
	}
	}).then(response => get(response, 'users.0'))
	}

	const deleteUser = ({ credentials, user }) => {
	const screenName = user.screen_name
	const headers = authHeaders(credentials)

	return fetch(`${ADMIN_USERS_URL}?nickname=${screenName}`, {
	method: 'DELETE',
	headers
	})
	}

	const fetchTimeline = ({
	timeline,
	credentials,
	since = false,
	until = false,
	userId = false,
	+ listId = false,
	tag = false,
	withMuted = false,
	replyVisibility = 'all'
	}) => {
	const timelineUrls = {
	public: MASTODON_PUBLIC_TIMELINE,
	friends: MASTODON_USER_HOME_TIMELINE_URL,
	dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
	notifications: MASTODON_USER_NOTIFICATIONS_URL,
	publicAndExternal: MASTODON_PUBLIC_TIMELINE,
	user: MASTODON_USER_TIMELINE_URL,
	media: MASTODON_USER_TIMELINE_URL,
	+ list: MASTODON_LIST_TIMELINE_URL,
	favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
	tag: MASTODON_TAG_TIMELINE_URL,
	bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
	}
	const isNotifications = timeline === 'notifications'
	const params = []

	let url = timelineUrls[timeline]

	if (timeline === 'user' \|\| timeline === 'media') {
	url = url(userId)
	}

	+ if (timeline === 'list') {
	+ url = url(listId)
	+ }
	+
	if (since) {
	params.push(['since_id', since])
	}
	if (until) {
	params.push(['max_id', until])
	}
	if (tag) {
	url = url(tag)
	}
	if (timeline === 'media') {
	params.push(['only_media', 1])
	}
	if (timeline === 'public') {
	params.push(['local', true])
	}
	if (timeline === 'public' \|\| timeline === 'publicAndExternal') {
	params.push(['only_media', false])
	}
	if (timeline !== 'favorites' && timeline !== 'bookmarks') {
	params.push(['with_muted', withMuted])
	}
	if (replyVisibility !== 'all') {
	params.push(['reply_visibility', replyVisibility])
	}

	params.push(['limit', 20])

	const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
	url += `?${queryString}`

	let status = ''
	let statusText = ''

	let pagination = {}
	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	status = data.status
	statusText = data.statusText
	pagination = parseLinkHeaderPagination(data.headers.get('Link'), {
	flakeId: timeline !== 'bookmarks' && timeline !== 'notifications'
	})
	return data
	})
	.then((data) => data.json())
	.then((data) => {
	if (!data.errors) {
	return { data: data.map(isNotifications ? parseNotification : parseStatus), pagination }
	} else {
	data.status = status
	data.statusText = statusText
	return data
	}
	})
	}

	const fetchPinnedStatuses = ({ id, credentials }) => {
	const url = MASTODON_USER_TIMELINE_URL(id) + '?pinned=true'
	return promisedRequest({ url, credentials })
	.then((data) => data.map(parseStatus))
	}

	const verifyCredentials = (user) => {
	return fetch(MASTODON_LOGIN_URL, {
	headers: authHeaders(user)
	})
	.then((response) => {
	if (response.ok) {
	return response.json()
	} else {
	return {
	error: response
	}
	}
	})
	.then((data) => data.error ? data : parseUser(data))
	}

	const favorite = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_FAVORITE_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const unfavorite = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNFAVORITE_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const retweet = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const unretweet = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNRETWEET_URL(id), method: 'POST', credentials })
	.then((data) => parseStatus(data))
	}

	const bookmarkStatus = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_BOOKMARK_STATUS_URL(id),
	headers: authHeaders(credentials),
	method: 'POST'
	})
	}

	const unbookmarkStatus = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_UNBOOKMARK_STATUS_URL(id),
	headers: authHeaders(credentials),
	method: 'POST'
	})
	}

	const postStatus = ({
	credentials,
	status,
	spoilerText,
	visibility,
	sensitive,
	poll,
	mediaIds = [],
	inReplyToStatusId,
	contentType,
	preview,
	idempotencyKey
	}) => {
	const form = new FormData()
	const pollOptions = poll.options \|\| []

	form.append('status', status)
	form.append('source', 'Pleroma FE')
	if (spoilerText) form.append('spoiler_text', spoilerText)
	if (visibility) form.append('visibility', visibility)
	if (sensitive) form.append('sensitive', sensitive)
	if (contentType) form.append('content_type', contentType)
	mediaIds.forEach(val => {
	form.append('media_ids[]', val)
	})
	if (pollOptions.some(option => option !== '')) {
	const normalizedPoll = {
	expires_in: poll.expiresIn,
	multiple: poll.multiple
	}
	Object.keys(normalizedPoll).forEach(key => {
	form.append(`poll[${key}]`, normalizedPoll[key])
	})

	pollOptions.forEach(option => {
	form.append('poll[options][]', option)
	})
	}
	if (inReplyToStatusId) {
	form.append('in_reply_to_id', inReplyToStatusId)
	}
	if (preview) {
	form.append('preview', 'true')
	}

	const postHeaders = authHeaders(credentials)
	if (idempotencyKey) {
	postHeaders['idempotency-key'] = idempotencyKey
	}

	return fetch(MASTODON_POST_STATUS_URL, {
	body: form,
	method: 'POST',
	headers: postHeaders
	})
	.then((response) => {
	return response.json()
	})
	.then((data) => data.error ? data : parseStatus(data))
	}

	const deleteStatus = ({ id, credentials }) => {
	return fetch(MASTODON_DELETE_URL(id), {
	headers: authHeaders(credentials),
	method: 'DELETE'
	})
	}

	const uploadMedia = ({ formData, credentials }) => {
	return fetch(MASTODON_MEDIA_UPLOAD_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((data) => data.json())
	.then((data) => parseAttachment(data))
	}

	const setMediaDescription = ({ id, description, credentials }) => {
	return promisedRequest({
	url: `${MASTODON_MEDIA_UPLOAD_URL}/${id}`,
	method: 'PUT',
	headers: authHeaders(credentials),
	payload: {
	description
	}
	}).then((data) => parseAttachment(data))
	}

	const importMutes = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(MUTES_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const importBlocks = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(BLOCKS_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const importFollows = ({ file, credentials }) => {
	const formData = new FormData()
	formData.append('list', file)
	return fetch(FOLLOW_IMPORT_URL, {
	body: formData,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.ok)
	}

	const deleteAccount = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return fetch(DELETE_ACCOUNT_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const changeEmail = ({ credentials, email, password }) => {
	const form = new FormData()

	form.append('email', email)
	form.append('password', password)

	return fetch(CHANGE_EMAIL_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const moveAccount = ({ credentials, password, targetAccount }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('target_account', targetAccount)

	return fetch(MOVE_ACCOUNT_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const addAlias = ({ credentials, alias }) => {
	return promisedRequest({
	url: ALIASES_URL,
	method: 'PUT',
	credentials,
	payload: { alias }
	})
	}

	const deleteAlias = ({ credentials, alias }) => {
	return promisedRequest({
	url: ALIASES_URL,
	method: 'DELETE',
	credentials,
	payload: { alias }
	})
	}

	const listAliases = ({ credentials }) => {
	return promisedRequest({
	url: ALIASES_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: (new Date()).getTime()
	}
	})
	}

	const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('new_password', newPassword)
	form.append('new_password_confirmation', newPasswordConfirmation)

	return fetch(CHANGE_PASSWORD_URL, {
	body: form,
	method: 'POST',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const settingsMFA = ({ credentials }) => {
	return fetch(MFA_SETTINGS_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const mfaDisableOTP = ({ credentials, password }) => {
	const form = new FormData()

	form.append('password', password)

	return fetch(MFA_DISABLE_OTP_URL, {
	body: form,
	method: 'DELETE',
	headers: authHeaders(credentials)
	})
	.then((response) => response.json())
	}

	const mfaConfirmOTP = ({ credentials, password, token }) => {
	const form = new FormData()

	form.append('password', password)
	form.append('code', token)

	return fetch(MFA_CONFIRM_OTP_URL, {
	body: form,
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}
	const mfaSetupOTP = ({ credentials }) => {
	return fetch(MFA_SETUP_OTP_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}
	const generateMfaBackupCodes = ({ credentials }) => {
	return fetch(MFA_BACKUP_CODES_URL, {
	headers: authHeaders(credentials),
	method: 'GET'
	}).then((data) => data.json())
	}

	const fetchMutes = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials })
	.then((users) => users.map(parseUser))
	}

	const muteUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST' })
	}

	const unmuteUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
	}

	const subscribeUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_SUBSCRIBE_USER(id), credentials, method: 'POST' })
	}

	const unsubscribeUser = ({ id, credentials }) => {
	return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' })
	}

	const fetchBlocks = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials })
	.then((users) => users.map(parseUser))
	}

	const addBackup = ({ credentials }) => {
	return promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'POST',
	credentials
	})
	}

	const listBackups = ({ credentials }) => {
	return promisedRequest({
	url: PLEROMA_BACKUP_URL,
	method: 'GET',
	credentials,
	params: {
	_cacheBooster: (new Date()).getTime()
	}
	})
	}

	const fetchOAuthTokens = ({ credentials }) => {
	const url = '/api/oauth_tokens.json'

	return fetch(url, {
	headers: authHeaders(credentials)
	}).then((data) => {
	if (data.ok) {
	return data.json()
	}
	throw new Error('Error fetching auth tokens', data)
	})
	}

	const revokeOAuthToken = ({ id, credentials }) => {
	const url = `/api/oauth_tokens/${id}`

	return fetch(url, {
	headers: authHeaders(credentials),
	method: 'DELETE'
	})
	}

	const suggestions = ({ credentials }) => {
	return fetch(SUGGESTIONS_URL, {
	headers: authHeaders(credentials)
	}).then((data) => data.json())
	}

	const markNotificationsAsSeen = ({ id, credentials, single = false }) => {
	const body = new FormData()

	if (single) {
	body.append('id', id)
	} else {
	body.append('max_id', id)
	}

	return fetch(NOTIFICATION_READ_URL, {
	body,
	headers: authHeaders(credentials),
	method: 'POST'
	}).then((data) => data.json())
	}

	const vote = ({ pollId, choices, credentials }) => {
	const form = new FormData()
	form.append('choices', choices)

	return promisedRequest({
	url: MASTODON_VOTE_URL(encodeURIComponent(pollId)),
	method: 'POST',
	credentials,
	payload: {
	choices
	}
	})
	}

	const fetchPoll = ({ pollId, credentials }) => {
	return promisedRequest(
	{
	url: MASTODON_POLL_URL(encodeURIComponent(pollId)),
	method: 'GET',
	credentials
	}
	)
	}

	const fetchFavoritedByUsers = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_STATUS_FAVORITEDBY_URL(id),
	method: 'GET',
	credentials
	}).then((users) => users.map(parseUser))
	}

	const fetchRebloggedByUsers = ({ id, credentials }) => {
	return promisedRequest({
	url: MASTODON_STATUS_REBLOGGEDBY_URL(id),
	method: 'GET',
	credentials
	}).then((users) => users.map(parseUser))
	}

	const fetchEmojiReactions = ({ id, credentials }) => {
	return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id), credentials })
	.then((reactions) => reactions.map(r => {
	r.accounts = r.accounts.map(parseUser)
	return r
	}))
	}

	const reactWithEmoji = ({ id, emoji, credentials }) => {
	return promisedRequest({
	url: PLEROMA_EMOJI_REACT_URL(id, emoji),
	method: 'PUT',
	credentials
	}).then(parseStatus)
	}

	const unreactWithEmoji = ({ id, emoji, credentials }) => {
	return promisedRequest({
	url: PLEROMA_EMOJI_UNREACT_URL(id, emoji),
	method: 'DELETE',
	credentials
	}).then(parseStatus)
	}

	const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
	return promisedRequest({
	url: MASTODON_REPORT_USER_URL,
	method: 'POST',
	payload: {
	account_id: userId,
	status_ids: statusIds,
	comment,
	forward
	},
	credentials
	})
	}

	const searchUsers = ({ credentials, query }) => {
	return promisedRequest({
	url: MASTODON_USER_SEARCH_URL,
	params: {
	q: query,
	resolve: true
	},
	credentials
	})
	.then((data) => data.map(parseUser))
	}

	const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
	let url = MASTODON_SEARCH_2
	const params = []

	if (q) {
	params.push(['q', encodeURIComponent(q)])
	}

	if (resolve) {
	params.push(['resolve', resolve])
	}

	if (limit) {
	params.push(['limit', limit])
	}

	if (offset) {
	params.push(['offset', offset])
	}

	if (following) {
	params.push(['following', true])
	}

	params.push(['with_relationships', true])

	const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
	url += `?${queryString}`

	return fetch(url, { headers: authHeaders(credentials) })
	.then((data) => {
	if (data.ok) {
	return data
	}
	throw new Error('Error fetching search result', data)
	})
	.then((data) => { return data.json() })
	.then((data) => {
	data.accounts = data.accounts.slice(0, limit).map(u => parseUser(u))
	data.statuses = data.statuses.slice(0, limit).map(s => parseStatus(s))
	return data
	})
	}

	const fetchKnownDomains = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_KNOWN_DOMAIN_LIST_URL, credentials })
	}

	const fetchDomainMutes = ({ credentials }) => {
	return promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })
	}

	const muteDomain = ({ domain, credentials }) => {
	return promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'POST',
	payload: { domain },
	credentials
	})
	}

	const unmuteDomain = ({ domain, credentials }) => {
	return promisedRequest({
	url: MASTODON_DOMAIN_BLOCKS_URL,
	method: 'DELETE',
	payload: { domain },
	credentials
	})
	}

	const dismissNotification = ({ credentials, id }) => {
	return promisedRequest({
	url: MASTODON_DISMISS_NOTIFICATION_URL(id),
	method: 'POST',
	payload: { id },
	credentials
	})
	}

	export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
	return Object.entries({
	...(credentials
	? { access_token: credentials }
	: {}
	),
	stream,
	...args
	}).reduce((acc, [key, val]) => {
	return acc + `${key}=${val}&`
	}, MASTODON_STREAMING + '?')
	}

	const MASTODON_STREAMING_EVENTS = new Set([
	'update',
	'notification',
	'delete',
	'filters_changed'
	])

	const PLEROMA_STREAMING_EVENTS = new Set([
	'pleroma:chat_update'
	])

	// A thin wrapper around WebSocket API that allows adding a pre-processor to it
	// Uses EventTarget and a CustomEvent to proxy events
	export const ProcessedWS = ({
	url,
	preprocessor = handleMastoWS,
	id = 'Unknown'
	}) => {
	const eventTarget = new EventTarget()
	const socket = new WebSocket(url)
	if (!socket) throw new Error(`Failed to create socket ${id}`)
	const proxy = (original, eventName, processor = a => a) => {
	original.addEventListener(eventName, (eventData) => {
	eventTarget.dispatchEvent(new CustomEvent(
	eventName,
	{ detail: processor(eventData) }
	))
	})
	}
	socket.addEventListener('open', (wsEvent) => {
	console.debug(`[WS][${id}] Socket connected`, wsEvent)
	})
	socket.addEventListener('error', (wsEvent) => {
	console.debug(`[WS][${id}] Socket errored`, wsEvent)
	})
	socket.addEventListener('close', (wsEvent) => {
	console.debug(
	`[WS][${id}] Socket disconnected with code ${wsEvent.code}`,
	wsEvent
	)
	})
	// Commented code reason: very spammy, uncomment to enable message debug logging
	/*
	socket.addEventListener('message', (wsEvent) => {
	console.debug(
	`[WS][${id}] Message received`,
	wsEvent
	)
	})
	/**/

	proxy(socket, 'open')
	proxy(socket, 'close')
	proxy(socket, 'message', preprocessor)
	proxy(socket, 'error')

	// 1000 = Normal Closure
	eventTarget.close = () => { socket.close(1000, 'Shutting down socket') }
	eventTarget.getState = () => socket.readyState

	return eventTarget
	}

	export const handleMastoWS = (wsEvent) => {
	const { data } = wsEvent
	if (!data) return
	const parsedEvent = JSON.parse(data)
	const { event, payload } = parsedEvent
	if (MASTODON_STREAMING_EVENTS.has(event) \|\| PLEROMA_STREAMING_EVENTS.has(event)) {
	// MastoBE and PleromaBE both send payload for delete as a PLAIN string
	if (event === 'delete') {
	return { event, id: payload }
	}
	const data = payload ? JSON.parse(payload) : null
	if (event === 'update') {
	return { event, status: parseStatus(data) }
	} else if (event === 'notification') {
	return { event, notification: parseNotification(data) }
	} else if (event === 'pleroma:chat_update') {
	return { event, chatUpdate: parseChat(data) }
	}
	} else {
	console.warn('Unknown event', wsEvent)
	return null
	}
	}

	export const WSConnectionStatus = Object.freeze({
	JOINED: 1,
	CLOSED: 2,
	ERROR: 3,
	DISABLED: 4,
	STARTING: 5,
	STARTING_INITIAL: 6
	})

	const chats = ({ credentials }) => {
	return fetch(PLEROMA_CHATS_URL, { headers: authHeaders(credentials) })
	.then((data) => data.json())
	.then((data) => {
	return { chats: data.map(parseChat).filter(c => c) }
	})
	}

	const getOrCreateChat = ({ accountId, credentials }) => {
	return promisedRequest({
	url: PLEROMA_CHAT_URL(accountId),
	method: 'POST',
	credentials
	})
	}

	const chatMessages = ({ id, credentials, maxId, sinceId, limit = 20 }) => {
	let url = PLEROMA_CHAT_MESSAGES_URL(id)
	const args = [
	maxId && `max_id=${maxId}`,
	sinceId && `since_id=${sinceId}`,
	limit && `limit=${limit}`
	].filter(_ => _).join('&')

	url = url + (args ? '?' + args : '')

	return promisedRequest({
	url,
	method: 'GET',
	credentials
	})
	}

	const sendChatMessage = ({ id, content, mediaId = null, idempotencyKey, credentials }) => {
	const payload = {
	content
	}

	if (mediaId) {
	payload.media_id = mediaId
	}

	const headers = {}

	if (idempotencyKey) {
	headers['idempotency-key'] = idempotencyKey
	}

	return promisedRequest({
	url: PLEROMA_CHAT_MESSAGES_URL(id),
	method: 'POST',
	payload,
	credentials,
	headers
	})
	}

	const readChat = ({ id, lastReadId, credentials }) => {
	return promisedRequest({
	url: PLEROMA_CHAT_READ_URL(id),
	method: 'POST',
	payload: {
	last_read_id: lastReadId
	},
	credentials
	})
	}

	const deleteChatMessage = ({ chatId, messageId, credentials }) => {
	return promisedRequest({
	url: PLEROMA_DELETE_CHAT_MESSAGE_URL(chatId, messageId),
	method: 'DELETE',
	credentials
	})
	}

	const apiService = {
	verifyCredentials,
	fetchTimeline,
	fetchPinnedStatuses,
	fetchConversation,
	fetchStatus,
	fetchFriends,
	exportFriends,
	fetchFollowers,
	followUser,
	unfollowUser,
	pinOwnStatus,
	unpinOwnStatus,
	muteConversation,
	unmuteConversation,
	blockUser,
	unblockUser,
	fetchUser,
	fetchUserRelationship,
	favorite,
	unfavorite,
	retweet,
	unretweet,
	bookmarkStatus,
	unbookmarkStatus,
	postStatus,
	deleteStatus,
	uploadMedia,
	setMediaDescription,
	fetchMutes,
	muteUser,
	unmuteUser,
	subscribeUser,
	unsubscribeUser,
	fetchBlocks,
	fetchOAuthTokens,
	revokeOAuthToken,
	tagUser,
	untagUser,
	deleteUser,
	addRight,
	deleteRight,
	activateUser,
	deactivateUser,
	register,
	getCaptcha,
	updateProfileImages,
	updateProfile,
	importMutes,
	importBlocks,
	importFollows,
	deleteAccount,
	changeEmail,
	moveAccount,
	addAlias,
	deleteAlias,
	listAliases,
	changePassword,
	settingsMFA,
	mfaDisableOTP,
	generateMfaBackupCodes,
	mfaSetupOTP,
	mfaConfirmOTP,
	addBackup,
	listBackups,
	fetchFollowRequests,
	+ fetchLists,
	+ createList,
	+ getList,
	+ updateList,
	+ getListAccounts,
	+ addAccountsToList,
	+ removeAccountsFromList,
	+ deleteList,
	approveUser,
	denyUser,
	suggestions,
	markNotificationsAsSeen,
	dismissNotification,
	vote,
	fetchPoll,
	fetchFavoritedByUsers,
	fetchRebloggedByUsers,
	fetchEmojiReactions,
	reactWithEmoji,
	unreactWithEmoji,
	reportUser,
	updateNotificationSettings,
	search2,
	searchUsers,
	fetchKnownDomains,
	fetchDomainMutes,
	muteDomain,
	unmuteDomain,
	chats,
	getOrCreateChat,
	chatMessages,
	sendChatMessage,
	readChat,
	deleteChatMessage
	}

	export default apiService
	diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
	index 4a40f5b5fa..62ee85496b 100644
	--- a/src/services/backend_interactor_service/backend_interactor_service.js
	+++ b/src/services/backend_interactor_service/backend_interactor_service.js
	@@ -1,43 +1,48 @@
	import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.service.js'
	import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
	import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
	import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
	+import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'

	const backendInteractorService = credentials => ({
	- startFetchingTimeline ({ timeline, store, userId = false, tag }) {
	- return timelineFetcher.startFetching({ timeline, store, credentials, userId, tag })
	+ startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
	+ return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
	},

	fetchTimeline (args) {
	return timelineFetcher.fetchAndUpdate({ ...args, credentials })
	},

	startFetchingNotifications ({ store }) {
	return notificationsFetcher.startFetching({ store, credentials })
	},

	fetchNotifications (args) {
	return notificationsFetcher.fetchAndUpdate({ ...args, credentials })
	},

	startFetchingFollowRequests ({ store }) {
	return followRequestFetcher.startFetching({ store, credentials })
	},

	+ startFetchingLists ({ store }) {
	+ return listsFetcher.startFetching({ store, credentials })
	+ },
	+
	startUserSocket ({ store }) {
	const serv = store.rootState.instance.server.replace('http', 'ws')
	const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
	return ProcessedWS({ url, id: 'User' })
	},

	...Object.entries(apiService).reduce((acc, [key, func]) => {
	return {
	...acc,
	[key]: (args) => func({ credentials, ...args })
	}
	}, {}),

	verifyCredentials: apiService.verifyCredentials
	})

	export default backendInteractorService
	diff --git a/src/services/lists_fetcher/lists_fetcher.service.js b/src/services/lists_fetcher/lists_fetcher.service.js
	new file mode 100644
	index 0000000000..8d9dae6665
	--- /dev/null
	+++ b/src/services/lists_fetcher/lists_fetcher.service.js
	@@ -0,0 +1,22 @@
	+import apiService from '../api/api.service.js'
	+import { promiseInterval } from '../promise_interval/promise_interval.js'
	+
	+const fetchAndUpdate = ({ store, credentials }) => {
	+ return apiService.fetchLists({ credentials })
	+ .then(lists => {
	+ store.commit('setLists', lists)
	+ }, () => {})
	+ .catch(() => {})
	+}
	+
	+const startFetching = ({ credentials, store }) => {
	+ const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
	+ boundFetchAndUpdate()
	+ return promiseInterval(boundFetchAndUpdate, 240000)
	+}
	+
	+const listsFetcher = {
	+ startFetching
	+}
	+
	+export default listsFetcher
	diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
	index 7ba138e035..8501907e4b 100644
	--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
	+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
	@@ -1,93 +1,97 @@
	import { camelCase } from 'lodash'

	import apiService from '../api/api.service.js'
	import { promiseInterval } from '../promise_interval/promise_interval.js'

	-const update = ({ store, statuses, timeline, showImmediately, userId, pagination }) => {
	+const update = ({ store, statuses, timeline, showImmediately, userId, listId, pagination }) => {
	const ccTimeline = camelCase(timeline)

	store.dispatch('addNewStatuses', {
	timeline: ccTimeline,
	userId,
	+ listId,
	statuses,
	showImmediately,
	pagination
	})
	}

	const fetchAndUpdate = ({
	store,
	credentials,
	timeline = 'friends',
	older = false,
	showImmediately = false,
	userId = false,
	+ listId = false,
	tag = false,
	until,
	since
	}) => {
	const args = { timeline, credentials }
	const rootState = store.rootState \|\| store.state
	const { getters } = store
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const { hideMutedPosts, replyVisibility } = getters.mergedConfig
	const loggedIn = !!rootState.users.currentUser

	if (older) {
	args.until = until \|\| timelineData.minId
	} else {
	if (since === undefined) {
	args.since = timelineData.maxId
	} else if (since !== null) {
	args.since = since
	}
	}

	args.userId = userId
	+ args.listId = listId
	args.tag = tag
	args.withMuted = !hideMutedPosts
	if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
	args.replyVisibility = replyVisibility
	}

	const numStatusesBeforeFetch = timelineData.statuses.length

	return apiService.fetchTimeline(args)
	.then(response => {
	if (response.errors) {
	throw new Error(`${response.status} ${response.statusText}`)
	}

	const { data: statuses, pagination } = response
	if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
	store.dispatch('queueFlush', { timeline, id: timelineData.maxId })
	}
	- update({ store, statuses, timeline, showImmediately, userId, pagination })
	+ update({ store, statuses, timeline, showImmediately, userId, listId, pagination })
	return { statuses, pagination }
	})
	.catch((error) => {
	store.dispatch('pushGlobalNotice', {
	level: 'error',
	messageKey: 'timeline.error',
	messageArgs: [error.message],
	timeout: 5000
	})
	})
	}

	-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => {
	+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
	const rootState = store.rootState \|\| store.state
	const timelineData = rootState.statuses.timelines[camelCase(timeline)]
	const showImmediately = timelineData.visibleStatuses.length === 0
	timelineData.userId = userId
	- fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag })
	+ timelineData.listId = listId
	+ fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
	const boundFetchAndUpdate = () =>
	- fetchAndUpdate({ timeline, credentials, store, userId, tag })
	+ fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
	return promiseInterval(boundFetchAndUpdate, 10000)
	}
	const timelineFetcher = {
	fetchAndUpdate,
	startFetching
	}

	export default timelineFetcher
	diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
	index 5cffefbb93..ff246d2b37 100644
	--- a/test/unit/specs/boot/routes.spec.js
	+++ b/test/unit/specs/boot/routes.spec.js
	@@ -1,43 +1,67 @@
	import routes from 'src/boot/routes'
	import { createRouter, createMemoryHistory } from 'vue-router'
	import { createStore } from 'vuex'

	const store = createStore({
	state: {
	instance: {}
	}
	})

	describe('routes', () => {
	const router = createRouter({
	history: createMemoryHistory(),
	routes: routes(store)
	})

	it('root path', async () => {
	await router.push('/main/all')

	const matchedComponents = router.currentRoute.value.matched

	// eslint-disable-next-line no-prototype-builtins
	expect(matchedComponents[0].components.default.components.hasOwnProperty('Timeline')).to.eql(true)
	})

	it('user\'s profile', async () => {
	await router.push('/fake-user-name')

	const matchedComponents = router.currentRoute.value.matched

	// eslint-disable-next-line no-prototype-builtins
	expect(matchedComponents[0].components.default.components.hasOwnProperty('UserCard')).to.eql(true)
	})

	it('user\'s profile at /users', async () => {
	await router.push('/users/fake-user-name')

	const matchedComponents = router.currentRoute.value.matched

	// eslint-disable-next-line no-prototype-builtins
	expect(matchedComponents[0].components.default.components.hasOwnProperty('UserCard')).to.eql(true)
	})
	+
	+ it('list view', async () => {
	+ await router.push('/lists')
	+
	+ const matchedComponents = router.currentRoute.value.matched
	+
	+ expect(Object.prototype.hasOwnProperty.call(matchedComponents[0].components.default.components, 'ListsCard')).to.eql(true)
	+ })
	+
	+ it('list timeline', async () => {
	+ await router.push('/lists/1')
	+
	+ const matchedComponents = router.currentRoute.value.matched
	+
	+ expect(Object.prototype.hasOwnProperty.call(matchedComponents[0].components.default.components, 'Timeline')).to.eql(true)
	+ })
	+
	+ it('list edit', async () => {
	+ await router.push('/lists/1/edit')
	+
	+ const matchedComponents = router.currentRoute.value.matched
	+
	+ expect(Object.prototype.hasOwnProperty.call(matchedComponents[0].components.default.components, 'BasicUserCard')).to.eql(true)
	+ })
	})
	diff --git a/test/unit/specs/modules/lists.spec.js b/test/unit/specs/modules/lists.spec.js
	new file mode 100644
	index 0000000000..ac9af1b6b4
	--- /dev/null
	+++ b/test/unit/specs/modules/lists.spec.js
	@@ -0,0 +1,83 @@
	+import { cloneDeep } from 'lodash'
	+import { defaultState, mutations, getters } from '../../../../src/modules/lists.js'
	+
	+describe('The lists module', () => {
	+ describe('mutations', () => {
	+ it('updates array of all lists', () => {
	+ const state = cloneDeep(defaultState)
	+ const list = { id: '1', title: 'testList' }
	+
	+ mutations.setLists(state, [list])
	+ expect(state.allLists).to.have.length(1)
	+ expect(state.allLists).to.eql([list])
	+ })
	+
	+ it('adds a new list with a title, updating the title for existing lists', () => {
	+ const state = cloneDeep(defaultState)
	+ const list = { id: '1', title: 'testList' }
	+ const modList = { id: '1', title: 'anotherTestTitle' }
	+
	+ mutations.setList(state, list)
	+ expect(state.allListsObject[list.id]).to.eql({ title: list.title })
	+ expect(state.allLists).to.have.length(1)
	+ expect(state.allLists[0]).to.eql(list)
	+
	+ mutations.setList(state, modList)
	+ expect(state.allListsObject[modList.id]).to.eql({ title: modList.title })
	+ expect(state.allLists).to.have.length(1)
	+ expect(state.allLists[0]).to.eql(modList)
	+ })
	+
	+ it('adds a new list with an array of IDs, updating the IDs for existing lists', () => {
	+ const state = cloneDeep(defaultState)
	+ const list = { id: '1', accountIds: ['1', '2', '3'] }
	+ const modList = { id: '1', accountIds: ['3', '4', '5'] }
	+
	+ mutations.setListAccounts(state, list)
	+ expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds })
	+
	+ mutations.setListAccounts(state, modList)
	+ expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds })
	+ })
	+
	+ it('deletes a list', () => {
	+ const state = {
	+ allLists: [{ id: '1', title: 'testList' }],
	+ allListsObject: {
	+ 1: { title: 'testList', accountIds: ['1', '2', '3'] }
	+ }
	+ }
	+ const id = '1'
	+
	+ mutations.deleteList(state, { id })
	+ expect(state.allLists).to.have.length(0)
	+ expect(state.allListsObject).to.eql({})
	+ })
	+ })
	+
	+ describe('getters', () => {
	+ it('returns list title', () => {
	+ const state = {
	+ allLists: [{ id: '1', title: 'testList' }],
	+ allListsObject: {
	+ 1: { title: 'testList', accountIds: ['1', '2', '3'] }
	+ }
	+ }
	+ const id = '1'
	+
	+ expect(getters.findListTitle(state)(id)).to.eql('testList')
	+ })
	+
	+ it('returns list accounts', () => {
	+ const state = {
	+ allLists: [{ id: '1', title: 'testList' }],
	+ allListsObject: {
	+ 1: { title: 'testList', accountIds: ['1', '2', '3'] }
	+ }
	+ }
	+ const id = '1'
	+
	+ expect(getters.findListAccounts(state)(id)).to.eql(['1', '2', '3'])
	+ })
	+ })
	+})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 31, 8:42 PM (19 h, 46 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1801807
Default Alt Text: (220 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions