Merge branch 'develop' into feature/add_settings_search

CHANGELOG.md

@@ -6,31 +6,40 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
-### Changed
+### Added
 
-- **breaking** PleromaFE login feature relies on `admin` scope presence in PleromaFE token (older versions of PleromaFE don't support it)
+- Ability to see local statuses in Statuses by instance section
-- Moves emoji pack configuration from the main menu to settings tab, redesigns it and fixes bugs
+- Ability to configure Oban.Cron settings and settings for notifications streamer
-- `mailerEnabled` must be set to `true` in order to require password reset (password reset currently only works via email)
+
-- Remove fetching initial data for configuring server settings
+### Fixed
-- Actions in users module (ActivateUsers, AddRight, DeactivateUsers, DeleteRight, DeleteUsers) now accept an array of users instead of one user
+
-- Leave dropdown menu open after clicking an action
+- Fix parsing tuples in Pleroma.Upload.Filter.Mogrify and Pleroma.Emails.Mailer settings
-- Move current try/catch error handling from view files to module, add it where necessary
+
-- Display checkboxes in status card and fetch statuses only when status card was rendered from Statuses by instance page
+## [2.0] - 2020-02-27
-- Move statuses by instance state from local state to store state
-- Pass user's ID to actions that moderate users when action is called from user's profile page
 
 ### Added
 
 - Optimistic update for actions in users module and fetching users after api function finished its execution
 - Relay management
 - Ability to fetch all statuses from a given instance
-- Grouped reports: now you can view reports, which are grouped by status (pagination is not implemented yet, though)
 - Ability to confirm users' emails and resend confirmation emails
 - Report notes
 - Ability to moderate users on the statuses page
 - Ability to moderate user on the user's page
+- Ability to remove setting's updated value and set it back to initial value
 - Ability to restart an application when settings that require instance reboot were changed
-- Mobile UI for Settings tab
+- Mobile and Tablet UI for all sections
+
+### Changed
+
+- **breaking** PleromaFE login feature relies on `admin` scope presence in PleromaFE token (older versions of PleromaFE don't support it)
+- `mailerEnabled` must be set to `true` in order to require password reset (password reset currently only works via email)
+- Render inputs for configuring settings based on description that comes from the BE
+- Remove fetching initial data for configuring server settings
+- Actions in users module (ActivateUsers, AddRight, DeactivateUsers, DeleteRight, DeleteUsers) now accept an array of users instead of one user
+- Leave dropdown menu open after clicking an action
+- Display checkboxes in status card and fetch statuses only when status card was rendered from Statuses by instance page
+- Move statuses by instance state from local state to store state
 
 ### Fixed
 
@@ -39,6 +48,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Remove duplicated success message
 - Fix styles for Statuses by instance page
 - Fix styles for Reports section
+- Fix listing remote emoji
 
 ## [1.2.0] - 2019-09-27
 

src/api/__mocks__/reports.js

@@ -11,40 +11,12 @@ const reports = [
   { created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '4', content: '', statuses: [] }
 ]
 
-const groupedReports = [
-  { account: { avatar: 'http://localhost:4000/images/avi.png', confirmation_pending: false, deactivated: false, display_name: 'leo', id: '9oG0YghgBi94EATI9I', local: true, nickname: 'leo', roles: { admin: false, moderator: false }, tags: [] },
-    actors: [{ acct: 'admin', avatar: 'http://localhost:4000/images/avi.png', deactivated: false, display_name: 'admin', id: '9oFz4pTauG0cnJ581w', local: true, nickname: 'admin', roles: { admin: false, moderator: false }, tags: [], url: 'http://localhost:4000/users/admin', username: 'admin' }],
-    date: '2019-11-23T12:56:11.969772Z',
-    reports: [
-      { created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '2', content: 'This is a report', statuses: [] },
-      { created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
-        { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'public', sensitive: false, id: '11', content: 'Hey!', url: '', created_at: '2019-05-10T21:35:33.000Z' },
-        { account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'unlisted', sensitive: true, id: '10', content: 'Bye!', url: '', created_at: '2019-05-10T21:00:33.000Z' }
-      ] }
-    ],
-    status: {
-      account: { acct: 'leo' },
-      content: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis',
-      created_at: '2019-11-23T12:55:20.000Z',
-      id: '9pFoQO69piu7cUDnJg',
-      url: 'http://localhost:4000/notice/9pFoQO69piu7cUDnJg',
-      visibility: 'unlisted',
-      sensitive: true
-    },
-    status_deleted: false
-  }
-]
-
 export async function fetchReports(filter, page, pageSize, authHost, token) {
   return filter.length > 0
     ? Promise.resolve({ data: { reports: reports.filter(report => report.state === filter) }})
     : Promise.resolve({ data: { reports }})
 }
 
-export async function fetchGroupedReports(authHost, token) {
-  return Promise.resolve({ data: { reports: groupedReports }})
-}
-
 export async function changeState(reportsData, authHost, token) {
   return Promise.resolve({ data: '' })
 }

src/api/reports.js

@@ -24,15 +24,6 @@ export async function fetchReports(filter, page, pageSize, authHost, token) {
   })
 }
 
-export async function fetchGroupedReports(authHost, token) {
-  return await request({
-    baseURL: baseName(authHost),
-    url: `/api/pleroma/admin/grouped_reports`,
-    method: 'get',
-    headers: authHeaders(token)
-  })
-}
-
 export async function createNote(content, reportID, authHost, token) {
   return await request({
     baseURL: baseName(authHost),

src/api/status.js

@@ -21,6 +21,15 @@ export async function deleteStatus(id, authHost, token) {
   })
 }
 
+export async function fetchStatuses({ godmode, localOnly, authHost, token, pageSize, page }) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/statuses?godmode=${godmode}&local_only=${localOnly}&page=${page}&page_size=${pageSize}`,
+    method: 'get',
+    headers: authHeaders(token)
+  })
+}
+
 export async function fetchStatusesByInstance({ instance, authHost, token, pageSize, page }) {
   return await request({
     baseURL: baseName(authHost),

src/components/Status/index.vue

@@ -267,9 +267,8 @@ export default {
     font-style: italic;
   }
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .el-message {
     min-width: 80%;
   }

src/lang/en.js

@@ -193,7 +193,7 @@ export default {
     deleteAccount: 'Delete Account',
     deleteAccounts: 'Delete Accounts',
     forceNsfw: 'Force posts to be NSFW',
-    stripMedia: 'Force posts not to have media',
+    stripMedia: 'Force posts to not have media',
     forceUnlisted: 'Force posts to be unlisted',
     sandbox: 'Force posts to be followers-only',
     disableRemoteSubscription: 'Disallow following user from remote instances',
@@ -244,7 +244,9 @@ export default {
     statuses: 'Statuses by instance',
     instanceFilter: 'Instance filter',
     loadMore: 'Load more',
-    noInstances: 'No other instances found'
+    noInstances: 'No other instances found',
+    onlyLocalStatuses: 'Show only local statuses',
+    showPrivateStatuses: 'Show private statuses'
   },
   userProfile: {
     tags: 'Tags',
@@ -254,8 +256,7 @@ export default {
     external: 'external',
     localUppercase: 'Local',
     nickname: 'Nickname',
-    recentStatuses: 'Recent Statues',
+    recentStatuses: 'Recent Statuses',
-    showPrivateStatuses: 'Show private statuses',
     roles: 'Roles',
     activeUppercase: 'Active',
     active: 'active',
@@ -273,7 +274,6 @@ export default {
   },
   reports: {
     reports: 'Reports',
-    groupedReports: 'Grouped reports',
     reply: 'Reply',
     from: 'From',
     showNotes: 'Show notes',

src/store/getters.js

@@ -17,8 +17,6 @@ const getters = {
   errorLogs: state => state.errorLog.logs,
   users: state => state.users.fetchedUsers,
   authHost: state => state.user.authHost,
-  settings: state => state.settings,
+  settings: state => state.settings
-  instances: state => state.peers.fetchedPeers,
-  statuses: state => state.status.fetchedStatuses
 }
 export default getters

src/store/modules/normalizers.js

@@ -63,6 +63,9 @@ export const parseNonTuples = (key, value) => {
     return updated
   }
   if (key === ':args') {
+    if (typeof value === 'string') {
+      return [value]
+    }
     const index = value.findIndex(el => typeof el === 'object' && el.tuple.includes('implode'))
     const updated = value.map((el, i) => i === index ? 'implode' : el)
     return updated
@@ -80,10 +83,15 @@ export const parseTuples = (tuples, key) => {
       accum[item.tuple[0]] = item.tuple[1].reduce((acc, mascot) => {
         return [...acc, { [mascot.tuple[0]]: { ...mascot.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
       }, [])
-    } else if (item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries') {
+    } else if (Array.isArray(item.tuple[1]) &&
+      (item.tuple[0] === ':groups' || item.tuple[0] === ':replace' || item.tuple[0] === ':retries')) {
       accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
         return [...acc, { [group.tuple[0]]: { value: group.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
       }, [])
+    } else if (item.tuple[0] === ':crontab') {
+      accum[item.tuple[0]] = item.tuple[1].reduce((acc, group) => {
+        return { ...acc, [group.tuple[1]]: group.tuple[0] }
+      }, {})
     } else if (item.tuple[0] === ':match_actor') {
       accum[item.tuple[0]] = Object.keys(item.tuple[1]).reduce((acc, regex) => {
         return [...acc, { [regex]: { value: item.tuple[1][regex], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
@@ -218,7 +226,12 @@ export const wrapUpdatedSettings = (group, settings, currentState) => {
 const wrapValues = (settings, currentState) => {
   return Object.keys(settings).map(setting => {
     const [type, value] = settings[setting]
-    if (type === 'keyword' || type.includes('keyword') || setting === ':replace') {
+    if (
+      type === 'keyword' ||
+      type.includes('keyword') ||
+      type.includes('tuple') && type.includes('list') ||
+      setting === ':replace'
+    ) {
       return { 'tuple': [setting, wrapValues(value, currentState)] }
     } else if (type === 'atom' && value.length > 0) {
       return { 'tuple': [setting, `:${value}`] }
@@ -226,8 +239,8 @@ const wrapValues = (settings, currentState) => {
       return typeof value === 'string'
         ? { 'tuple': [setting, value] }
         : { 'tuple': [setting, { 'tuple': value }] }
-    } else if (type.includes('tuple') && type.includes('list')) {
+    } else if (type === 'reversed_tuple') {
-      return { 'tuple': [setting, value] }
+      return { 'tuple': [value, setting] }
     } else if (type === 'map') {
       const mapValue = Object.keys(value).reduce((acc, key) => {
         acc[key] = setting === ':match_actor' ? value[key] : value[key][1]

src/store/modules/reports.js

@@ -1,13 +1,11 @@
-import { changeState, fetchReports, fetchGroupedReports, createNote, deleteNote } from '@/api/reports'
+import { changeState, fetchReports, createNote, deleteNote } from '@/api/reports'
 
 const reports = {
   state: {
     fetchedReports: [],
-    fetchedGroupedReports: [],
     totalReportsCount: 0,
     currentPage: 1,
     pageSize: 50,
-    groupReports: false,
     stateFilter: '',
     loading: true
   },
@@ -24,17 +22,11 @@ const reports = {
     SET_REPORTS: (state, reports) => {
       state.fetchedReports = reports
     },
-    SET_GROUPED_REPORTS: (state, reports) => {
-      state.fetchedGroupedReports = reports
-    },
     SET_REPORTS_COUNT: (state, total) => {
       state.totalReportsCount = total
     },
     SET_REPORTS_FILTER: (state, filter) => {
       state.stateFilter = filter
-    },
-    SET_REPORTS_GROUPING: (state) => {
-      state.groupReports = !state.groupReports
     }
   },
   actions: {
@@ -46,14 +38,7 @@ const reports = {
         return updatedReportsIds.includes(report.id) ? { ...report, state: reportsData[0].state } : report
       })
 
-      const updatedGroupedReports = state.fetchedGroupedReports.map(group => {
-        const updatedReportsIds = reportsData.map(({ id }) => id)
-        const updatedReports = group.reports.map(report => updatedReportsIds.includes(report.id) ? { ...report, state: reportsData[0].state } : report)
-        return { ...group, reports: updatedReports }
-      })
-
       commit('SET_REPORTS', updatedReports)
-      commit('SET_GROUPED_REPORTS', updatedGroupedReports)
     },
     ClearFetchedReports({ commit }) {
       commit('SET_REPORTS', [])
@@ -67,19 +52,9 @@ const reports = {
       commit('SET_PAGE', page)
       commit('SET_LOADING', false)
     },
-    async FetchGroupedReports({ commit, getters }) {
-      commit('SET_LOADING', true)
-      const { data } = await fetchGroupedReports(getters.authHost, getters.token)
-
-      commit('SET_GROUPED_REPORTS', data.reports)
-      commit('SET_LOADING', false)
-    },
     SetFilter({ commit }, filter) {
       commit('SET_REPORTS_FILTER', filter)
     },
-    ToggleReportsGrouping({ commit }) {
-      commit('SET_REPORTS_GROUPING')
-    },
     CreateReportNote({ commit, getters, state, rootState }, { content, reportID }) {
       createNote(content, reportID, getters.authHost, getters.token)
 

src/store/modules/status.js

@@ -1,4 +1,4 @@
-import { changeStatusScope, deleteStatus, fetchStatusesByInstance } from '@/api/status'
+import { changeStatusScope, deleteStatus, fetchStatuses, fetchStatusesByInstance } from '@/api/status'
 
 const status = {
   state: {
@@ -6,11 +6,21 @@ const status = {
     loading: false,
     statusesByInstance: {
       selectedInstance: '',
+      showLocal: false,
+      showPrivate: false,
       page: 1,
-      pageSize: 30
+      pageSize: 20,
+      buttonLoading: false,
+      allLoaded: false
     }
   },
   mutations: {
+    CHANGE_GODMODE_CHECKBOX_VALUE: (state, value) => {
+      state.statusesByInstance.showPrivate = value
+    },
+    CHANGE_LOCAL_CHECKBOX_VALUE: (state, value) => {
+      state.statusesByInstance.showLocal = value
+    },
     CHANGE_PAGE: (state, page) => {
       state.statusesByInstance.page = page
     },
@@ -23,6 +33,12 @@ const status = {
     PUSH_STATUSES: (state, statuses) => {
       state.fetchedStatuses = [...state.fetchedStatuses, ...statuses]
     },
+    SET_ALL_LOADED: (state, status) => {
+      state.statusesByInstance.allLoaded = status
+    },
+    SET_BUTTON_LOADING: (state, status) => {
+      state.statusesByInstance.buttonLoading = status
+    },
     SET_LOADING: (state, status) => {
       state.loading = status
     }
@@ -36,8 +52,6 @@ const status = {
         dispatch('FetchUserStatuses', { userId, godmode })
       } else if (fetchStatusesByInstance) { // called from Statuses by Instance
         dispatch('FetchStatusesByInstance')
-      } else { // called from GroupedReports
-        dispatch('FetchGroupedReports')
       }
     },
     async DeleteStatus({ dispatch, getters }, { statusId, reportCurrentPage, userId, godmode, fetchStatusesByInstance }) {
@@ -48,14 +62,23 @@ const status = {
         dispatch('FetchUserStatuses', { userId, godmode })
       } else if (fetchStatusesByInstance) { // called from Statuses by Instance
         dispatch('FetchStatusesByInstance')
-      } else { // called from GroupedReports
-        dispatch('FetchGroupedReports')
       }
     },
-    async FetchStatusesByInstance({ commit, getters, state }) {
+    async FetchStatusesByInstance({ commit, getters, state, rootState }) {
       commit('SET_LOADING', true)
-      const statuses = state.statusesByInstance.selectedInstance === ''
+      if (state.statusesByInstance.selectedInstance === '') {
-        ? { data: [] }
+        commit('SET_STATUSES_BY_INSTANCE', [])
+      } else {
+        const statuses = state.statusesByInstance.selectedInstance === rootState.user.authHost
+          ? await fetchStatuses(
+            {
+              godmode: state.statusesByInstance.showPrivate,
+              localOnly: state.statusesByInstance.showLocal,
+              authHost: getters.authHost,
+              token: getters.token,
+              pageSize: state.statusesByInstance.pageSize,
+              page: state.statusesByInstance.page
+            })
           : await fetchStatusesByInstance(
             {
               instance: state.statusesByInstance.selectedInstance,
@@ -64,13 +87,26 @@ const status = {
               pageSize: state.statusesByInstance.pageSize,
               page: state.statusesByInstance.page
             })
-
         commit('SET_STATUSES_BY_INSTANCE', statuses.data)
+        if (statuses.data.length < state.statusesByInstance.pageSize) {
+          commit('SET_ALL_LOADED', true)
+        }
+      }
       commit('SET_LOADING', false)
     },
-    async FetchStatusesPageByInstance({ commit, getters, state }) {
+    async FetchStatusesPageByInstance({ commit, getters, rootState, state }) {
-      commit('SET_LOADING', true)
+      commit('SET_BUTTON_LOADING', true)
-      const statuses = await fetchStatusesByInstance(
+      const statuses = state.statusesByInstance.selectedInstance === rootState.user.authHost
+        ? await fetchStatuses(
+          {
+            godmode: state.statusesByInstance.showPrivate,
+            localOnly: state.statusesByInstance.showLocal,
+            authHost: getters.authHost,
+            token: getters.token,
+            pageSize: state.statusesByInstance.pageSize,
+            page: state.statusesByInstance.page
+          })
+        : await fetchStatusesByInstance(
           {
             instance: state.statusesByInstance.selectedInstance,
             authHost: getters.authHost,
@@ -78,12 +114,29 @@ const status = {
             pageSize: state.statusesByInstance.pageSize,
             page: state.statusesByInstance.page
           })
-
       commit('PUSH_STATUSES', statuses.data)
-      commit('SET_LOADING', false)
+      commit('SET_BUTTON_LOADING', false)
+      if (statuses.data.length < state.statusesByInstance.pageSize) {
+        commit('SET_ALL_LOADED', true)
+      }
+    },
+    HandleGodmodeCheckboxChange({ commit, dispatch }, value) {
+      dispatch('HandlePageChange', 1)
+      commit('SET_ALL_LOADED', false)
+
+      commit('CHANGE_GODMODE_CHECKBOX_VALUE', value)
+      dispatch('FetchStatusesByInstance')
+    },
+    HandleLocalCheckboxChange({ commit, dispatch }, value) {
+      dispatch('HandlePageChange', 1)
+      commit('SET_ALL_LOADED', false)
+
+      commit('CHANGE_LOCAL_CHECKBOX_VALUE', value)
+      dispatch('FetchStatusesByInstance')
     },
     HandleFilterChange({ commit }, instance) {
       commit('CHANGE_SELECTED_INSTANCE', instance)
+      commit('SET_ALL_LOADED', false)
     },
     HandlePageChange({ commit }, page) {
       commit('CHANGE_PAGE', page)

src/views/emojiPacks/components/NewEmojiUploader.vue

@@ -44,6 +44,9 @@ export default {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     shortcodePresent() {
       return this.shortcode.trim() === ''
     }

src/views/emojiPacks/components/SingleEmojiEditor.vue

@@ -95,6 +95,9 @@ export default {
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     localPacks() {
       return this.$store.state.emojiPacks.localPacks
     },

src/views/invites/index.vue

@@ -85,7 +85,7 @@
         sortable/>
       <el-table-column
         :label="$t('invites.token')"
-        :min-width="isDesktop ? 350 : 125"
+        :min-width="isDesktop ? 320 : 120"
         prop="token"/>
       <el-table-column
         v-if="isDesktop"
@@ -119,7 +119,9 @@
         <template slot-scope="scope">
           <el-tag
             :type="scope.row.used ? 'danger' : 'success'"
-            disable-transitions>{{ scope.row.used ? $t('invites.used') : $t('invites.active') }}</el-tag>
+            disable-transitions>
+            {{ scope.row.used ? $t('invites.used') : $t('invites.active') }}
+          </el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -268,9 +270,8 @@ export default {
     margin: 0 0 10px 0;
   }
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .invites-container {
     .actions-container {
       display: flex;
@@ -279,6 +280,9 @@ only screen and (max-width: 760px),
       align-items: center;
       margin: 15px 10px 7px 10px;
     }
+    .cell {
+      padding: 0;
+    }
     .create-invite-token {
       width: 100%;
     }
@@ -296,7 +300,9 @@ only screen and (max-width: 760px),
     }
     .invite-token-table {
       width: 100%;
-      margin: 0;
+      margin: 0 5px;
+      font-size: 12px;
+      font-weight: 500;
     }
     .invite-via-email {
       width: 100%;
@@ -308,6 +314,11 @@ only screen and (max-width: 760px),
     .info {
       margin: 0 0 10px 5px;
     }
+    th {
+      .cell {
+        padding: 0;
+      }
+    }
   }
   .create-invite-token {
     width: 100%

src/views/moderation_log/index.vue

@@ -1,11 +1,10 @@
 <template>
   <div v-if="!loading" class="moderation-log-container">
     <h1>{{ $t('moderationLog.moderationLog') }}</h1>
-    <el-row type="flex" class="row-bg" justify="space-between">
+    <div class="moderation-log-nav-container">
-      <el-col :span="9">
       <el-select
         v-model="user"
-          class="user-select"
+        class="moderation-log-user-select"
         clearable
         placeholder="Filter by admin/moderator"
         @change="fetchLogWithFilters">
@@ -20,18 +19,13 @@
             :value="item.id"/>
         </el-option-group>
       </el-select>
-      </el-col>
-      <el-col :span="6" class="search-container">
       <el-input
         v-model="search"
         placeholder="Search logs"
-          prefix-icon="el-icon-search"
         clearable
+        class="moderation-log-search"
         @input="handleDebounceSearchInput"/>
-      </el-col>
+    </div>
-    </el-row>
-    <el-row type="flex" class="row-bg" justify="space-between">
-      <el-col :span="9" class="date-container">
     <el-date-picker
       :default-time="['00:00:00', '23:59:59']"
       v-model="dateRange"
@@ -39,9 +33,8 @@
       start-placeholder="Start date"
       end-placeholder="End date"
       unlink-panels
+      class="moderation-log-date-panel"
       @change="fetchLogWithFilters" />
-      </el-col>
-    </el-row>
     <el-timeline>
       <el-timeline-item
         v-for="(logEntry, index) in log"
@@ -56,6 +49,7 @@
         :hide-on-single-page="true"
         :page-size="50"
         :total="total"
+        :small="isMobile"
         layout="prev, pager, next"
         @current-change="fetchLogWithFilters" />
     </div>
@@ -77,6 +71,9 @@ export default {
     }
   },
   computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
     loading() {
       return this.$store.state.moderationLog.logLoading &&
              this.$store.state.moderationLog.adminsLoading
@@ -139,7 +136,17 @@ h1 {
   margin: 25px 45px 0 0;
   padding: 0px;
 }
-.user-select {
+.moderation-log-date-panel {
+  width: 350px;
+}
+.moderation-log-nav-container {
+  display: flex;
+  justify-content: space-between;
+}
+.moderation-log-search {
+  width: 350px;
+}
+.moderation-log-user-select {
   margin: 0 0 20px;
   width: 350px;
 }
@@ -149,4 +156,30 @@ h1 {
 .pagination {
   text-align: center;
 }
+
+@media only screen and (max-width:480px) {
+  .moderation-log-date-panel {
+    width: 100%;
+  }
+  .moderation-log-user-select {
+    margin: 0 0 10px;
+    width: 55%;
+  }
+  .moderation-log-search {
+    width: 40%;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .moderation-log-date-panel {
+    width: 55%;
+  }
+  .moderation-log-user-select {
+    margin: 0 0 10px;
+    width: 55%;
+  }
+  .moderation-log-search {
+    width: 40%;
+  }
+}
 </style>

src/views/reports/components/GroupedReport.vue

@@ -1,159 +0,0 @@
-<template>
-  <el-timeline class="reports-timeline">
-    <el-timeline-item
-      v-for="groupedReport in groupedReports"
-      :key="groupedReport.id"
-      :timestamp="parseTimestamp(groupedReport.date)"
-      placement="top"
-      class="timeline-item-container">
-      <el-card class="grouped-report">
-        <div class="header-container">
-          <div>
-            <h3 class="report-title">{{ $t('reports.reportsOn') }} {{ groupedReport.account.display_name }}</h3>
-          </div>
-          <div>
-            <el-dropdown trigger="click">
-              <el-button plain size="small" icon="el-icon-edit" class="report-actions-button">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="changeAllReports('resolved', groupedReport.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
-                <el-dropdown-item @click.native="changeAllReports('open', groupedReport.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
-                <el-dropdown-item @click.native="changeAllReports('closed', groupedReport.reports)">{{ $t('reports.closeAll') }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-            <moderate-user-dropdown :account="groupedReport.account"/>
-          </div>
-        </div>
-        <div>
-          <el-divider class="divider"/>
-          <span class="report-row-key">{{ $t('reports.account') }}:</span>
-          <img
-            :src="groupedReport.account.avatar"
-            alt="avatar"
-            class="avatar-img">
-          <a :href="groupedReport.account.url" target="_blank">
-            <span>{{ groupedReport.account.nickname }}</span>
-          </a>
-        </div>
-        <div>
-          <el-divider class="divider"/>
-          <span class="report-row-key">{{ $t('reports.actors') }}:</span>
-          <span v-for="(actor, index) in groupedReport.actors" :key="actor.id">
-            <a :href="actor.url" target="_blank">
-              {{ actor.acct }}<span v-if="index < groupedReport.actors.length - 1">, </span>
-            </a>
-          </span>
-        </div>
-        <div v-if="groupedReport.status">
-          <el-divider class="divider"/>
-          <span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
-          <status :status="groupedReport.status" :show-checkbox="false" class="reported-status"/>
-        </div>
-        <div v-if="groupedReport.reports">
-          <el-collapse>
-            <el-collapse-item :title="$t('reports.reports')">
-              <report-card :reports="groupedReport.reports"/>
-            </el-collapse-item>
-          </el-collapse>
-        </div>
-      </el-card>
-    </el-timeline-item>
-  </el-timeline>
-</template>
-
-<script>
-import moment from 'moment'
-import ModerateUserDropdown from './ModerateUserDropdown'
-import ReportCard from './ReportCard'
-import Status from '@/components/Status'
-
-export default {
-  name: 'Report',
-  components: { ModerateUserDropdown, ReportCard, Status },
-  props: {
-    groupedReports: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    changeAllReports(reportState, groupOfReports) {
-      const reportsData = groupOfReports.map(report => {
-        return { id: report.id, state: reportState }
-      })
-      this.$store.dispatch('ChangeReportState', reportsData)
-    },
-    parseTimestamp(timestamp) {
-      return moment(timestamp).format('L HH:mm')
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
-  a {
-    text-decoration: underline;
-  }
-  .avatar-img {
-    vertical-align: bottom;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-  }
-  .el-card__body {
-    padding: 17px;
-  }
-  .el-card__header {
-    background-color: #FAFAFA;
-    padding: 10px 20px;
-  }
-  .el-icon-arrow-right {
-    margin-right: 6px;
-  }
-  .grouped-report {
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      height: 36px;
-    }
-  }
-  .line {
-    width: 100%;
-    height: 0;
-    border: 0.5px solid #EBEEF5;
-    margin: 15px 0 15px;
-  }
-  .report-title {
-    margin: 0;
-  }
-  .report-row-key {
-    font-size: 14px;
-    font-weight: 500;
-  }
-  .reports-timeline {
-    margin: 30px 45px 45px 19px;
-    padding: 0px;
-  }
-  .reported-status {
-    margin-top: 15px;
-  }
-  @media
-  only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
-    .grouped-report {
-      .header-container {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        height: auto;
-      }
-      .report-actions-button {
-        margin: 3px 0 6px;
-      }
-      .report-title {
-        margin-bottom: 7px;
-      }
-    }
-  }
-</style>

src/views/reports/components/NoteCard.vue

@@ -97,9 +97,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
+
-  only screen and (max-width: 760px),
+  @media only screen and (max-width:480px) {
-  (min-device-width: 768px) and (max-device-width: 1024px) {
     .el-card__header {
       padding: 10px 17px;
     }

src/views/reports/components/Report.vue

@@ -74,7 +74,7 @@
                 v-model="notes[report.id]"
                 :placeholder="$t('reports.leaveNote')"
                 type="textarea"
-                rows="3"/>
+                rows="2"/>
               <div class="report-post-note">
                 <el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
               </div>
@@ -180,6 +180,9 @@ export default {
     height: 15px;
     margin-left: 5px;
   }
+  .divider {
+    margin: 15px 0;
+  }
   .el-card__body {
     padding: 17px;
   }
@@ -279,9 +282,8 @@ export default {
     font-style: italic;
     color: gray;
   }
-  @media
+
-  only screen and (max-width: 760px),
+  @media only screen and (max-width:480px) {
-  (min-device-width: 768px) and (max-device-width: 1024px) {
     .report {
       .header-container {
         display: flex;
@@ -303,5 +305,11 @@ export default {
         margin-bottom: 7px;
       }
     }
+    .reports-timeline {
+      margin: 20px 10px;
+      .el-timeline-item__wrapper {
+        padding-left: 20px;
+      }
+    }
   }
 </style>

src/views/reports/components/ReportCard.vue

@@ -108,9 +108,8 @@ export default {
     display: flex;
     justify-content: space-between;
   }
-  @media
+
-  only screen and (max-width: 760px),
+  @media only screen and (max-width:480px) {
-  (min-device-width: 768px) and (max-device-width: 1024px) {
     .el-card__header {
       padding: 10px 17px;
     }

src/views/reports/components/ReportsFilter.vue

@@ -54,12 +54,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>

src/views/reports/index.vue

@@ -1,22 +1,14 @@
 <template>
   <div class="reports-container">
-    <h1 v-if="groupReports">
+    <h1>
-      {{ $t('reports.groupedReports') }}
-      <span class="report-count">({{ normalizedReportsCount }})</span>
-    </h1>
-    <h1 v-else>
       {{ $t('reports.reports') }}
       <span class="report-count">({{ normalizedReportsCount }})</span>
     </h1>
     <div class="reports-filter-container">
-      <reports-filter v-if="!groupReports"/>
+      <reports-filter/>
-      <el-checkbox v-model="groupReports" class="group-reports-checkbox">
-        Group reports by statuses
-      </el-checkbox>
     </div>
     <div class="block">
-      <grouped-report v-loading="loading" v-if="groupReports" :grouped-reports="groupedReports"/>
+      <report v-loading="loading" :reports="reports"/>
-      <report v-loading="loading" v-else :reports="reports"/>
       <div v-if="reports.length === 0" class="no-reports-message">
         <p>There are no reports to display</p>
       </div>
@@ -25,32 +17,18 @@
 </template>
 
 <script>
-import GroupedReport from './components/GroupedReport'
 import numeral from 'numeral'
 import Report from './components/Report'
 import ReportsFilter from './components/ReportsFilter'
 
 export default {
-  components: { GroupedReport, Report, ReportsFilter },
+  components: { Report, ReportsFilter },
   computed: {
-    groupedReports() {
-      return this.$store.state.reports.fetchedGroupedReports
-    },
-    groupReports: {
-      get() {
-        return this.$store.state.reports.groupReports
-      },
-      set() {
-        this.toggleReportsGrouping()
-      }
-    },
     loading() {
       return this.$store.state.reports.loading
     },
     normalizedReportsCount() {
-      return this.groupReports
+      return numeral(this.$store.state.reports.totalReportsCount).format('0a')
-        ? numeral(this.$store.state.reports.fetchedGroupedReports.length).format('0a')
-        : numeral(this.$store.state.reports.totalReportsCount).format('0a')
     },
     reports() {
       return this.$store.state.reports.fetchedReports
@@ -58,12 +36,6 @@ export default {
   },
   mounted() {
     this.$store.dispatch('FetchReports', 1)
-    this.$store.dispatch('FetchGroupedReports')
-  },
-  methods: {
-    toggleReportsGrouping() {
-      this.$store.dispatch('ToggleReportsGrouping')
-    }
   }
 }
 </script>
@@ -77,9 +49,6 @@ export default {
     margin: 22px 15px 22px 15px;
     padding-bottom: 0
   }
-  .group-reports-checkbox {
-    margin-top: 10px;
-  }
   h1 {
     margin: 22px 0 0 15px;
   }
@@ -92,9 +61,8 @@ export default {
     font-size: 28px;
   }
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .reports-container {
     h1 {
       margin: 7px 10px 15px 10px;
@@ -103,8 +71,5 @@ only screen and (max-width: 760px),
       margin: 0 10px;
     }
   }
-  #app > div > div.main-container > section > div > div.block > ul {
-    margin: 45px 45px 5px 19px;
-  }
 }
 </style>

src/views/settings/components/Frontend.vue

@@ -3,6 +3,10 @@
     <el-form ref="frontendData" :model="frontendData" :label-width="labelWidth">
       <setting :setting-group="frontend" :data="frontendData"/>
     </el-form>
+    <el-form ref="staticFeData" :model="staticFeData" :label-width="labelWidth">
+      <setting :setting-group="staticFe" :data="staticFeData"/>
+    </el-form>
+    <el-divider class="divider thick-line"/>
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.assets') }}</span>
@@ -70,12 +74,6 @@ export default {
     frontendData() {
       return _.get(this.settings.settings, [':pleroma', ':frontend_configurations']) || {}
     },
-    markup() {
-      return this.settings.description.find(setting => setting.key === ':markup')
-    },
-    markupData() {
-      return _.get(this.settings.settings, [':pleroma', ':markup']) || {}
-    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -93,6 +91,18 @@ export default {
     },
     loading() {
       return this.settings.loading
+    },
+    markup() {
+      return this.settings.description.find(setting => setting.key === ':markup')
+    },
+    markupData() {
+      return _.get(this.settings.settings, [':pleroma', ':markup']) || {}
+    },
+    staticFe() {
+      return this.settings.description.find(setting => setting.key === ':static_fe')
+    },
+    staticFeData() {
+      return _.get(this.settings.settings, [':pleroma', ':static_fe']) || {}
     }
   },
   methods: {

src/views/settings/components/Http.vue

@@ -3,10 +3,6 @@
     <el-form ref="httpData" :model="httpData" :label-width="labelWidth">
       <setting :setting-group="http" :data="httpData"/>
     </el-form>
-    <el-form ref="teslaAdapter" :model="teslaAdapterData" :label-width="labelWidth">
-      <setting :setting-group="teslaAdapter" :data="teslaAdapterData"/>
-    </el-form>
-    <el-divider class="divider thick-line"/>
     <el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
       <el-form-item class="grouped-settings-header">
         <span class="label-font">{{ $t('settings.corsPlug') }}</span>
@@ -86,12 +82,6 @@ export default {
     loading() {
       return this.settings.loading
     },
-    teslaAdapter() {
-      return this.settings.description.find(setting => setting.group === ':tesla')
-    },
-    teslaAdapterData() {
-      return _.get(this.settings.settings, [':tesla']) || {}
-    },
     webCacheTtl() {
       return this.settings.description.find(setting => setting.key === ':web_cache_ttl')
     },

src/views/settings/components/Inputs.vue

@@ -95,11 +95,12 @@
         </el-input>
         <!-- special inputs -->
         <auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
-        <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
+        <crontab-input v-if="setting.key === ':crontab'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
         <editable-keyword-input v-if="editableKeyword(setting.key, setting.type)" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
         <icons-input v-if="setting.key === ':icons'" :data="iconsData" :setting-group="settingGroup" :setting="setting"/>
-        <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
+        <mascots-input v-if="setting.key === ':mascots'" :data="keywordData" :setting-group="settingGroup" :setting="setting"/>
         <multiple-select v-if="setting.key === ':backends' || setting.key === ':args'" :data="data" :setting-group="settingGroup" :setting="setting"/>
+        <proxy-url-input v-if="setting.key === ':proxy_url'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting" :parents="settingParent"/>
         <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
         <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
         <!-------------------->
@@ -117,7 +118,7 @@
 
 <script>
 import i18n from '@/lang'
-import { AutoLinkerInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
+import { AutoLinkerInput, CrontabInput, EditableKeywordInput, IconsInput, MascotsInput, MultipleSelect, ProxyUrlInput, PruneInput, RateLimitInput } from './inputComponents'
 import { processNested } from '@/store/modules/normalizers'
 import _ from 'lodash'
 import marked from 'marked'
@@ -126,6 +127,7 @@ export default {
   name: 'Inputs',
   components: {
     AutoLinkerInput,
+    CrontabInput,
     EditableKeywordInput,
     IconsInput,
     MascotsInput,
@@ -198,7 +200,7 @@ export default {
       return Array.isArray(this.data[':icons']) ? this.data[':icons'] : []
     },
     inputValue() {
-      if ([':esshd', ':cors_plug', ':quack', ':http_signatures', ':tesla'].includes(this.settingGroup.group) &&
+      if ([':esshd', ':cors_plug', ':quack', ':http_signatures', ':tesla', ':swoosh'].includes(this.settingGroup.group) &&
         this.data[this.setting.key]) {
         return this.setting.type === 'atom' && this.data[this.setting.key].value[0] === ':'
           ? this.data[this.setting.key].value.substr(1)
@@ -249,8 +251,8 @@ export default {
   methods: {
     editableKeyword(key, type) {
       return key === ':replace' ||
-        (Array.isArray(type) && type.includes('keyword') && type.includes('integer')) ||
         type === 'map' ||
+        (Array.isArray(type) && type.includes('keyword') && type.includes('integer')) ||
         (Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
     },
     getFormattedDescription(desc) {

src/views/settings/components/Instance.vue

@@ -23,6 +23,17 @@
     <el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth">
       <setting :setting-group="pleromaUser" :data="pleromaUserData"/>
     </el-form>
+    <el-divider class="divider thick-line"/>
+    <el-form ref="uriSchemes" :model="uriSchemesData" :label-width="labelWidth">
+      <setting :setting-group="uriSchemes" :data="uriSchemesData"/>
+    </el-form>
+    <el-divider class="divider thick-line"/>
+    <el-form ref="feed" :model="feedData" :label-width="labelWidth">
+      <setting :setting-group="feed" :data="feedData"/>
+    </el-form>
+    <el-form ref="streamer" :model="streamerData" :label-width="labelWidth">
+      <setting :setting-group="streamer" :data="streamerData"/>
+    </el-form>
     <div class="submit-button-container">
       <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
     </div>
@@ -50,6 +61,12 @@ export default {
     adminTokenData() {
       return _.get(this.settings.settings, [':pleroma', ':admin_token']) || {}
     },
+    feed() {
+      return this.settings.description.find(setting => setting.key === ':feed')
+    },
+    feedData() {
+      return _.get(this.settings.settings, [':pleroma', ':feed']) || {}
+    },
     fetchInitialPosts() {
       return this.settings.description.find(setting => setting.key === ':fetch_initial_posts')
     },
@@ -97,6 +114,18 @@ export default {
     },
     scheduledActivityData() {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.ScheduledActivity']) || {}
+    },
+    streamer() {
+      return this.$store.state.settings.description.find(setting => setting.key === ':streamer')
+    },
+    streamerData() {
+      return _.get(this.settings.settings, [':pleroma', ':streamer']) || {}
+    },
+    uriSchemes() {
+      return this.settings.description.find(setting => setting.key === ':uri_schemes')
+    },
+    uriSchemesData() {
+      return _.get(this.settings.settings, [':pleroma', ':uri_schemes']) || {}
     }
   },
   methods: {

src/views/settings/components/MRF.vue

@@ -29,6 +29,14 @@
     <el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
       <setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
     </el-form>
+    <el-divider class="divider thick-line"/>
+    <el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-width="labelWidth">
+      <setting :setting-group="mrfObjectAge" :data="mrfObjectAgeData"/>
+    </el-form>
+    <el-divider class="divider thick-line"/>
+    <el-form ref="modules" :model="modulesData" :label-width="labelWidth">
+      <setting :setting-group="modules" :data="modulesData"/>
+    </el-form>
     <div class="submit-button-container">
       <el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
     </div>
@@ -66,6 +74,12 @@ export default {
     loading() {
       return this.settings.loading
     },
+    modules() {
+      return this.settings.description.find(setting => setting.key === ':modules')
+    },
+    modulesData() {
+      return _.get(this.settings.settings, [':pleroma', ':modules']) || {}
+    },
     mrfSimple() {
       return this.settings.description.find(setting => setting.key === ':mrf_simple')
     },
@@ -90,6 +104,12 @@ export default {
     mrfKeywordData() {
       return _.get(this.settings.settings, [':pleroma', ':mrf_keyword']) || {}
     },
+    mrfObjectAge() {
+      return this.settings.description.find(setting => setting.key === ':mrf_object_age')
+    },
+    mrfObjectAgeData() {
+      return _.get(this.settings.settings, [':pleroma', ':mrf_object_age']) || {}
+    },
     mrfSubchain() {
       return this.settings.description.find(setting => setting.key === ':mrf_subchain')
     },

src/views/settings/components/Mailer.vue

@@ -4,6 +4,10 @@
       <setting :setting-group="mailer" :data="mailerData"/>
     </el-form>
     <el-divider class="divider thick-line"/>
+    <el-form ref="swoosh" :model="swooshData" :label-width="labelWidth">
+      <setting :setting-group="swoosh" :data="swooshData"/>
+    </el-form>
+    <el-divider class="divider thick-line"/>
     <el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
       <setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
     </el-form>
@@ -61,6 +65,12 @@ export default {
     mailerData() {
       return _.get(this.settings.settings, [':pleroma', 'Pleroma.Emails.Mailer']) || {}
     },
+    swoosh() {
+      return this.settings.description.find(setting => setting.group === ':swoosh')
+    },
+    swooshData() {
+      return _.get(this.settings.settings, [':swoosh']) || {}
+    },
     userEmail() {
       return this.settings.description.find(setting => setting.key === 'Pleroma.Emails.UserEmail')
     },

src/views/settings/components/inputComponents/CrontabInput.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-form :label-width="labelWidth" :label-position="isMobile ? 'top' : 'right'" class="crontab">
+    <el-form-item v-for="worker in workers" :key="worker" :label="worker" class="crontab-container">
+      <el-input
+        :value="data[worker]"
+        :placeholder="getSuggestion(worker) || null"
+        class="input setting-input"
+        @input="update($event, worker)"/>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'CrontabInput',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    setting: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    settingGroup: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
+    labelWidth() {
+      if (this.isMobile) {
+        return '100%'
+      } else {
+        return '380px'
+      }
+    },
+    workers() {
+      return this.setting.suggestions.map(worker => worker[1])
+    }
+  },
+  methods: {
+    getSuggestion(worker) {
+      return this.setting.suggestions.find(suggestion => suggestion[1] === worker)[0]
+    },
+    update(value, worker) {
+      const currentValue = this.$store.state.settings.settings[this.settingGroup.group][this.settingGroup.key][this.setting.key]
+      const updatedValue = { ...currentValue, [worker]: value }
+      const updatedValueWithType = Object.keys(currentValue).reduce((acc, key) => {
+        if (key === worker) {
+          return { ...acc, [key]: ['reversed_tuple', value] }
+        } else {
+          return { ...acc, [key]: ['reversed_tuple', currentValue[key]] }
+        }
+      }, {})
+
+      this.$store.dispatch('UpdateSettings',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValueWithType, type: this.setting.type }
+      )
+      this.$store.dispatch('UpdateState',
+        { group: this.settingGroup.group, key: this.settingGroup.key, input: this.setting.key, value: updatedValue }
+      )
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../../styles/main';
+@include settings
+</style>

src/views/settings/components/inputComponents/EditableKeywordInput.vue

@@ -96,15 +96,18 @@ export default {
       this.updateSetting(updatedValue, this.settingGroup.group, this.settingGroup.key, this.setting.key, this.setting.type)
     },
     updateSetting(value, group, key, input, type) {
-      const updatedSettings = type !== 'map'
+      const updatedSettings = this.wrapUpdatedSettings(value, input, type)
-        ? value.reduce((acc, element) => {
-          return { ...acc, [Object.keys(element)[0]]: ['list', Object.values(element)[0].value] }
-        }, {})
-        : value.reduce((acc, element) => {
-          return { ...acc, [Object.keys(element)[0]]: Object.values(element)[0].value }
-        }, {})
       this.$store.dispatch('UpdateSettings', { group, key, input, value: updatedSettings, type })
       this.$store.dispatch('UpdateState', { group, key, input, value })
+    },
+    wrapUpdatedSettings(value, input, type) {
+      return type === 'map'
+        ? value.reduce((acc, element) => {
+          return { ...acc, [Object.keys(element)[0]]: Object.values(element)[0].value }
+        }, {})
+        : value.reduce((acc, element) => {
+          return { ...acc, [Object.keys(element)[0]]: ['list', Object.values(element)[0].value] }
+        }, {})
     }
   }
 }

src/views/settings/components/inputComponents/index.js

@@ -1,5 +1,6 @@
 export { default as AutoLinkerInput } from './AutoLinkerInput'
 export { default as EditableKeywordInput } from './EditableKeywordInput'
+export { default as CrontabInput } from './CrontabInput'
 export { default as IconsInput } from './IconsInput'
 export { default as MascotsInput } from './MascotsInput'
 export { default as MultipleSelect } from './MultipleSelect'

src/views/settings/styles/main.scss

@@ -339,6 +339,12 @@
   }
 
   @media only screen and (max-width:480px) {
+    .crontab {
+      width: 100%;
+      label {
+        width: 100%;
+      }
+    }
     .delete-setting-button {
       margin: 4px 0 0 5px;
       height: 28px;
@@ -382,6 +388,10 @@
         margin: 0;
         padding: 0 15px 10px 0;
       }
+      .el-form-item.crontab-container:first-child {
+        margin: 0;
+        padding: 0 ;
+      }
       .el-form-item:first-child .mascot-form-item {
         padding: 0;
       }

src/views/statuses/index.vue

@@ -22,6 +22,15 @@
         :selected-users="selectedUsers"
         @apply-action="clearSelection"/>
     </div>
+    <div v-if="currentInstance" class="checkbox-container">
+      <el-checkbox v-model="showLocal" class="show-private-statuses">
+        {{ $t('statuses.onlyLocalStatuses') }}
+      </el-checkbox>
+      <el-checkbox v-model="showPrivate" class="show-private-statuses">
+        {{ $t('statuses.showPrivateStatuses') }}
+      </el-checkbox>
+    </div>
+    <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
     <div v-for="status in statuses" :key="status.id" class="status-container">
       <status
         :status="status"
@@ -30,13 +39,13 @@
         @status-selection="handleStatusSelection" />
     </div>
     <div v-if="statuses.length > 0" class="statuses-pagination">
-      <el-button @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
+      <el-button v-if="!allLoaded" :loading="buttonLoading" @click="handleLoadMore">{{ $t('statuses.loadMore') }}</el-button>
+      <el-button v-else icon="el-icon-check" circle/>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import MultipleUsersMenu from '@/views/users/components/MultipleUsersMenu'
 import Status from '@/components/Status'
 
@@ -52,10 +61,18 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
+    allLoaded() {
-      'instances',
+      return this.$store.state.status.statusesByInstance.allLoaded
-      'statuses'
+    },
-    ]),
+    buttonLoading() {
+      return this.$store.state.status.statusesByInstance.buttonLoading
+    },
+    currentInstance() {
+      return this.selectedInstance === this.$store.state.user.authHost
+    },
+    instances() {
+      return [this.$store.state.user.authHost, ...this.$store.state.peers.fetchedPeers]
+    },
     isDesktop() {
       return this.$store.state.app.device === 'desktop'
     },
@@ -75,6 +92,25 @@ export default {
       set(instance) {
         this.$store.dispatch('HandleFilterChange', instance)
       }
+    },
+    showLocal: {
+      get() {
+        return this.$store.state.status.statusesByInstance.showLocal
+      },
+      set(value) {
+        this.$store.dispatch('HandleLocalCheckboxChange', value)
+      }
+    },
+    showPrivate: {
+      get() {
+        return this.$store.state.status.statusesByInstance.showPrivate
+      },
+      set(value) {
+        this.$store.dispatch('HandleGodmodeCheckboxChange', value)
+      }
+    },
+    statuses() {
+      return this.$store.state.status.fetchedStatuses
     }
   },
   mounted() {
@@ -97,7 +133,6 @@ export default {
       if (this.selectedUsers.find(selectedUser => user.id === selectedUser.id) !== undefined) {
         return
       }
-
       this.selectedUsers = [...this.selectedUsers, user]
     }
   }
@@ -111,6 +146,9 @@ export default {
     margin: 0 0 10px;
   }
 }
+.checkbox-container {
+  margin-bottom: 15px;
+}
 .filter-container {
   display: flex;
   height: 36px;
@@ -129,19 +167,22 @@ h1 {
   margin: 22px 0 0 0;
 }
 
-@media
+@media only screen and (max-width:480px) {
-only screen and (max-width: 760px),
+  .checkbox-container {
-(min-device-width: 768px) and (max-device-width: 1024px) {
+    margin-bottom: 10px;
+  }
   .filter-container {
     display: flex;
     height: 36px;
     flex-direction: column;
-    margin: 10px 10px
+    margin: 10px 0;
   }
-
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
+  .select-instance {
+    width: 100%;
+  }
 }
 </style>

src/views/users/components/NewAccountDialog.vue

@@ -139,9 +139,8 @@ export default {
 .create-account-form-item-without-margin {
   margin-bottom: 0px;
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .create-user-dialog {
     width: 85%
   }

src/views/users/components/UsersFilter.vue

@@ -61,12 +61,17 @@ export default {
 .select-field {
   width: 350px;
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .select-field {
     width: 100%;
     margin-bottom: 5px;
   }
 }
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .select-field {
+    width: 50%;
+  }
+}
 </style>

src/views/users/index.vue

@@ -274,9 +274,8 @@ export default {
     font-size: 28px;
   }
 }
-@media
+
-only screen and (max-width: 760px),
+@media only screen and (max-width:480px) {
-(min-device-width: 768px) and (max-device-width: 1024px) {
   .password-reset-token-dialog {
     width: 85%
   }

src/views/users/show.vue

@@ -23,8 +23,7 @@
         </p>
       </div>
     </el-dialog>
-    <el-row>
+    <div class="user-profile-container">
-      <el-col :span="8">
       <el-card class="user-profile-card">
         <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
           <table class="user-profile-table">
@@ -78,26 +77,19 @@
           </table>
         </div>
       </el-card>
-      </el-col>
+      <div class="recent-statuses-container">
-      <el-row type="flex" class="row-bg" justify="space-between">
-        <el-col :span="18">
         <h2 class="recent-statuses">{{ $t('userProfile.recentStatuses') }}</h2>
-        </el-col>
+        <el-checkbox v-model="showPrivate" class="show-private-statuses" @change="onTogglePrivate">
-        <el-col :span="6" class="show-private">
+          {{ $t('statuses.showPrivateStatuses') }}
-          <el-checkbox v-model="showPrivate" @change="onTogglePrivate">
-            {{ $t('userProfile.showPrivateStatuses') }}
         </el-checkbox>
-        </el-col>
-      </el-row>
-      <el-col :span="16">
         <el-timeline v-if="!statusesLoading" class="statuses">
           <el-timeline-item v-for="status in statuses" :key="status.id">
             <status :status="status" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
           </el-timeline-item>
           <p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
         </el-timeline>
-      </el-col>
+      </div>
-    </el-row>
+    </div>
   </main>
 </template>
 
@@ -193,6 +185,11 @@ table {
   margin-left: 28px;
   color: #606266;
 }
+.recent-statuses-container {
+  display: flex;
+  flex-direction: column;
+  width: 67%;
+}
 .recent-statuses-header {
   margin-top: 10px;
 }
@@ -205,6 +202,10 @@ table {
   line-height: 67px;
   margin-right: 20px;
 }
+.show-private-statuses {
+  margin-left: 28px;
+  margin-bottom: 20px;
+}
 .recent-statuses {
   margin-left: 28px;
 }
@@ -218,6 +219,11 @@ table {
 }
 .user-profile-card {
   margin: 0 20px;
+  width: 30%;
+  height: fit-content;
+}
+.user-profile-container {
+  display: flex;
 }
 .user-profile-table {
   margin: 0;
@@ -225,4 +231,65 @@ table {
 .user-profile-tag {
   margin: 0 4px 4px 0;
 }
+
+@media only screen and (max-width:480px) {
+  .avatar-name-container {
+    margin-bottom: 10px;
+  }
+  .recent-statuses {
+    margin: 20px 10px 15px 10px;
+  }
+  .recent-statuses-container {
+    width: 100%;
+    margin: 0 10px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 10px;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 15px 10px;
+  }
+  .user-profile-card {
+    margin: 0 10px;
+    width: 95%;
+    td {
+      width: 80px;
+    }
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .avatar-name-container {
+    margin-bottom: 20px;
+  }
+  .recent-statuses {
+    margin: 20px 10px 15px 0;
+  }
+  .recent-statuses-container {
+    width: 97%;
+    margin: 0 20px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 0;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 20px 20px;
+  }
+  .user-profile-card {
+    margin: 0 20px;
+    width: fit-content;
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
+}
 </style>

test/views/reports/groupedReport.test.js

@@ -1,47 +0,0 @@
-import Vuex from 'vuex'
-import { mount, createLocalVue, config } from '@vue/test-utils'
-import Element from 'element-ui'
-import GroupedReport from '@/views/reports/components/GroupedReport'
-import storeConfig from './store.conf'
-import { cloneDeep } from 'lodash'
-import flushPromises from 'flush-promises'
-
-config.mocks["$t"] = () => {}
-
-const localVue = createLocalVue()
-localVue.use(Vuex)
-localVue.use(Element)
-
-jest.mock('@/api/reports')
-
-describe('Grouped report', () => {
-  let store
-
-  beforeEach(async() => {
-    store = new Vuex.Store(cloneDeep(storeConfig))
-    store.dispatch('FetchGroupedReports')
-    await flushPromises()
-  })
-
-  it('changes state of all reports in a group', async (done) => {
-    const groupedReports = store.state.reports.fetchedGroupedReports
-    const wrapper = mount(GroupedReport, {
-      store,
-      localVue,
-      propsData: {
-        groupedReports
-      }
-    })
-
-    expect(groupedReports[0].reports[0].state).toBe('open')
-    expect(groupedReports[0].reports[1].state).toBe('resolved')
-
-    const button = wrapper.find(`.grouped-report .el-dropdown-menu__item:nth-child(3)`)
-    button.trigger('click')
-    await flushPromises()
-
-    expect(store.state.reports.fetchedGroupedReports[0].reports[0].state).toBe('closed')
-    expect(store.state.reports.fetchedGroupedReports[0].reports[1].state).toBe('closed')
-    done()
-  })
-})