Merge branch 'develop' of https://git.pleroma.social/pleroma/pleroma-fe into feat/report-notification

10 files changed, 111 insertions, 66 deletions

diff --git a/src/modules/chats.js b/src/modules/chats.js
index 69d683bd..f28c2603 100644
--- a/src/modules/chats.js
+++ b/src/modules/chats.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { reactive } from 'vue'
 import { find, omitBy, orderBy, sumBy } from 'lodash'
 import chatService from '../services/chat_service/chat_service.js'
 import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
@@ -13,8 +13,8 @@ const emptyChatList = () => ({
 const defaultState = {
   chatList: emptyChatList(),
   chatListFetcher: null,
-  openedChats: {},
-  openedChatMessageServices: {},
+  openedChats: reactive({}),
+  openedChatMessageServices: reactive({}),
   fetcher: undefined,
   currentChatId: null,
   lastReadMessageId: null
@@ -137,10 +137,10 @@ const chats = {
     },
     addOpenedChat (state, { _dispatch, chat }) {
       state.currentChatId = chat.id
-      Vue.set(state.openedChats, chat.id, chat)
+      state.openedChats[chat.id] = chat
 
       if (!state.openedChatMessageServices[chat.id]) {
-        Vue.set(state.openedChatMessageServices, chat.id, chatService.empty(chat.id))
+        state.openedChatMessageServices[chat.id] = chatService.empty(chat.id)
       }
     },
     setCurrentChatId (state, { chatId }) {
@@ -160,7 +160,7 @@ const chats = {
           }
         } else {
           state.chatList.data.push(updatedChat)
-          Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
+          state.chatList.idStore[updatedChat.id] = updatedChat
         }
       })
     },
@@ -172,7 +172,7 @@ const chats = {
         chat.updated_at = updatedChat.updated_at
       }
       if (!chat) { state.chatList.data.unshift(updatedChat) }
-      Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
+      state.chatList.idStore[updatedChat.id] = updatedChat
     },
     deleteChat (state, { _dispatch, id, _rootGetters }) {
       state.chats.data = state.chats.data.filter(conversation =>
@@ -186,8 +186,8 @@ const chats = {
       commit('setChatListFetcher', { fetcher: undefined })
       for (const chatId in state.openedChats) {
         chatService.clear(state.openedChatMessageServices[chatId])
-        Vue.delete(state.openedChats, chatId)
-        Vue.delete(state.openedChatMessageServices, chatId)
+        delete state.openedChats[chatId]
+        delete state.openedChatMessageServices[chatId]
       }
     },
     setChatsLoading (state, { value }) {
@@ -215,8 +215,8 @@ const chats = {
       for (const chatId in state.openedChats) {
         if (currentChatId !== chatId) {
           chatService.clear(state.openedChatMessageServices[chatId])
-          Vue.delete(state.openedChats, chatId)
-          Vue.delete(state.openedChatMessageServices, chatId)
+          delete state.openedChats[chatId]
+          delete state.openedChatMessageServices[chatId]
         }
       }
     },
diff --git a/src/modules/config.js b/src/modules/config.js
index 93487b99..c4b08390 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,6 +1,9 @@
-import { set, delete as del } from 'vue'
+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]
 
@@ -47,6 +50,7 @@ export const defaultState = {
   pauseOnUnfocused: true,
   stopGifs: true,
   replyVisibility: 'all',
+  thirdColumnMode: 'notifications',
   notificationVisibility: {
     follows: true,
     mentions: true,
@@ -56,7 +60,8 @@ export const defaultState = {
     emojiReactions: true,
     followRequest: true,
     reports: true,
-    chatMention: true
+    chatMention: true,
+    polls: true
   },
   webPushNotifications: false,
   muteWords: [],
@@ -75,6 +80,8 @@ export const defaultState = {
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
+  disableStickyHeaders: false,
+  showScrollbars: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
@@ -123,14 +130,14 @@ const config = {
   },
   mutations: {
     setOption (state, { name, value }) {
-      set(state, name, value)
+      state[name] = value
     },
     setHighlight (state, { user, color, type }) {
       const data = this.state.config.highlight[user]
       if (color || type) {
-        set(state.highlight, user, { color: color || data.color, type: type || data.type })
+        state.highlight[user] = { color: color || data.color, type: type || data.type }
       } else {
-        del(state.highlight, user)
+        delete state.highlight[user]
       }
     }
   },
@@ -164,6 +171,10 @@ const config = {
           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
       }
     }
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 79c54096..220463ca 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,4 +1,3 @@
-import { set } from 'vue'
 import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
@@ -102,7 +101,7 @@ const instance = {
   mutations: {
     setInstanceOption (state, { name, value }) {
       if (typeof value !== 'undefined') {
-        set(state, name, value)
+        state[name] = value
       }
     },
     setKnownDomains (state, domains) {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index d6db32fd..a86193ea 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,5 +1,3 @@
-import { set, delete as del } from 'vue'
-
 const defaultState = {
   settingsModalState: 'hidden',
   settingsModalLoaded: false,
@@ -15,7 +13,7 @@ const defaultState = {
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
     )
   },
-  mobileLayout: false,
+  layoutType: 'normal',
   globalNotices: [],
   layoutHeight: 0,
   lastTimeline: null
@@ -29,18 +27,17 @@ const interfaceMod = {
         if (state.noticeClearTimeout) {
           clearTimeout(state.noticeClearTimeout)
         }
-        set(state.settings, 'currentSaveStateNotice', { error: false, data: success })
-        set(state.settings, 'noticeClearTimeout',
-          setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
+        state.settings.currentSaveStateNotice = { error: false, data: success }
+        state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
       } else {
-        set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error })
+        state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },
-    setMobileLayout (state, value) {
-      state.mobileLayout = value
+    setLayoutType (state, value) {
+      state.layoutType = value
     },
     closeSettingsModal (state) {
       state.settingsModalState = 'hidden'
@@ -75,6 +72,9 @@ const interfaceMod = {
     setLayoutHeight (state, value) {
       state.layoutHeight = value
     },
+    setLayoutWidth (state, value) {
+      state.layoutWidth = value
+    },
     setLastTimeline (state, value) {
       state.lastTimeline = value
     }
@@ -89,9 +89,6 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setMobileLayout ({ commit }, value) {
-      commit('setMobileLayout', value)
-    },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
     },
@@ -109,7 +106,7 @@ const interfaceMod = {
       commit('openSettingsModal')
     },
     pushGlobalNotice (
-      { commit, dispatch },
+      { commit, dispatch, state },
       {
         messageKey,
         messageArgs = {},
@@ -121,11 +118,14 @@ const interfaceMod = {
         messageArgs,
         level
       }
+      commit('pushGlobalNotice', notice)
+      // Adding a new element to array wraps it in a Proxy, which breaks the comparison
+      // TODO: Generate UUID or something instead or relying on !== operator?
+      const newNotice = state.globalNotices[state.globalNotices.length - 1]
       if (timeout) {
-        setTimeout(() => dispatch('removeGlobalNotice', notice), timeout)
+        setTimeout(() => dispatch('removeGlobalNotice', newNotice), timeout)
       }
-      commit('pushGlobalNotice', notice)
-      return notice
+      return newNotice
     },
     removeGlobalNotice ({ commit }, notice) {
       commit('removeGlobalNotice', notice)
@@ -133,6 +133,24 @@ const interfaceMod = {
     setLayoutHeight ({ commit }, value) {
       commit('setLayoutHeight', value)
     },
+    // value is optional, assuming it was cached prior
+    setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
+      let width = value
+      if (value !== undefined) {
+        commit('setLayoutWidth', value)
+      } else {
+        width = state.layoutWidth
+      }
+      const mobileLayout = width <= 800
+      const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
+      const { thirdColumnMode } = rootGetters.mergedConfig
+      if (thirdColumnMode === 'none' || !rootState.users.currentUser) {
+        commit('setLayoutType', normalOrMobile)
+      } else {
+        const wideLayout = width >= 1300
+        commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
+      }
+    },
     setLastTimeline ({ commit }, value) {
       commit('setLastTimeline', value)
     }
diff --git a/src/modules/oauth.js b/src/modules/oauth.js
index a2a83450..038bc3f3 100644
--- a/src/modules/oauth.js
+++ b/src/modules/oauth.js
@@ -1,5 +1,3 @@
-import { delete as del } from 'vue'
-
 const oauth = {
   state: {
     clientId: false,
@@ -29,7 +27,7 @@ const oauth = {
       state.userToken = false
       // state.token is userToken with older name, coming from persistent state
       // let's clear it as well, since it is being used as a fallback of state.userToken
-      del(state, 'token')
+      delete state.token
     }
   },
   getters: {
diff --git a/src/modules/polls.js b/src/modules/polls.js
index 92b89a06..1c4f98a4 100644
--- a/src/modules/polls.js
+++ b/src/modules/polls.js
@@ -1,5 +1,4 @@
 import { merge } from 'lodash'
-import { set } from 'vue'
 
 const polls = {
   state: {
@@ -13,25 +12,25 @@ const polls = {
       // Make expired-state change trigger re-renders properly
       poll.expired = Date.now() > Date.parse(poll.expires_at)
       if (existingPoll) {
-        set(state.pollsObject, poll.id, merge(existingPoll, poll))
+        state.pollsObject[poll.id] = merge(existingPoll, poll)
       } else {
-        set(state.pollsObject, poll.id, poll)
+        state.pollsObject[poll.id] = poll
       }
     },
     trackPoll (state, pollId) {
       const currentValue = state.trackedPolls[pollId]
       if (currentValue) {
-        set(state.trackedPolls, pollId, currentValue + 1)
+        state.trackedPolls[pollId] = currentValue + 1
       } else {
-        set(state.trackedPolls, pollId, 1)
+        state.trackedPolls[pollId] = 1
       }
     },
     untrackPoll (state, pollId) {
       const currentValue = state.trackedPolls[pollId]
       if (currentValue) {
-        set(state.trackedPolls, pollId, currentValue - 1)
+        state.trackedPolls[pollId] = currentValue - 1
       } else {
-        set(state.trackedPolls, pollId, 0)
+        state.trackedPolls[pollId] = 0
       }
     }
   },
diff --git a/src/modules/serverSideConfig.js b/src/modules/serverSideConfig.js
index 5c1baedb..4b73af26 100644
--- a/src/modules/serverSideConfig.js
+++ b/src/modules/serverSideConfig.js
@@ -55,7 +55,10 @@ export const settingsMap = {
     get: 'pleroma.allow_following_move',
     set: 'allow_following_move'
   },
-  'discoverable': 'source.discoverable',
+  'discoverable': {
+    get: 'source.pleroma.discoverable',
+    set: 'discoverable'
+  },
   'hideFavorites': {
     get: 'pleroma.hide_favorites',
     set: 'hide_favorites'
diff --git a/src/modules/shout.js b/src/modules/shout.js
index 507a4d83..88aefbfe 100644
--- a/src/modules/shout.js
+++ b/src/modules/shout.js
@@ -1,7 +1,8 @@
 const shout = {
   state: {
     messages: [],
-    channel: { state: '' }
+    channel: { state: '' },
+    joined: false
   },
   mutations: {
     setChannel (state, channel) {
@@ -13,11 +14,23 @@ const shout = {
     },
     setMessages (state, messages) {
       state.messages = messages.slice(-19, 20)
+    },
+    setJoined (state, joined) {
+      state.joined = joined
     }
   },
   actions: {
     initializeShout (store, socket) {
       const channel = socket.channel('chat:public')
+      channel.joinPush.receive('ok', () => {
+        store.commit('setJoined', true)
+      })
+      channel.onClose(() => {
+        store.commit('setJoined', false)
+      })
+      channel.onError(() => {
+        store.commit('setJoined', false)
+      })
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index cb2a8d46..66cc82bc 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -12,7 +12,6 @@ import {
   isArray,
   omitBy
 } from 'lodash'
-import { set } from 'vue'
 import {
   isStatusNotification,
   isValidNotification,
@@ -92,7 +91,7 @@ const mergeOrAdd = (arr, obj, item) => {
     // This is a new item, prepare it
     prepareStatus(item)
     arr.push(item)
-    set(obj, item.id, item)
+    obj[item.id] = item
     return { item, new: true }
   }
 }
@@ -131,7 +130,7 @@ const addStatusToGlobalStorage = (state, data) => {
     if (conversationsObject[conversationId]) {
       conversationsObject[conversationId].push(status)
     } else {
-      set(conversationsObject, conversationId, [status])
+      conversationsObject[conversationId] = [status]
     }
   }
   return result
@@ -527,7 +526,7 @@ export const mutations = {
   },
   addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
-    set(status, 'emoji_reactions', emojiReactions)
+    status['emoji_reactions'] = emojiReactions
   },
   addOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
@@ -546,9 +545,9 @@ export const mutations = {
 
     // Update count of existing reaction if it exists, otherwise append at the end
     if (reactionIndex >= 0) {
-      set(status.emoji_reactions, reactionIndex, newReaction)
+      status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction])
+      status['emoji_reactions'] = [...status.emoji_reactions, newReaction]
     }
   },
   removeOwnReaction (state, { id, emoji, currentUser }) {
@@ -567,9 +566,9 @@ export const mutations = {
     }
 
     if (newReaction.count > 0) {
-      set(status.emoji_reactions, reactionIndex, newReaction)
+      status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.name !== emoji))
+      status['emoji_reactions'] = status.emoji_reactions.filter(r => r.name !== emoji)
     }
   },
   updateStatusWithPoll (state, { id, poll }) {
diff --git a/src/modules/users.js b/src/modules/users.js
index 05ff44d5..f951483f 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,7 +1,7 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
+import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
-import { set } from 'vue'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
@@ -15,9 +15,9 @@ export const mergeOrAdd = (arr, obj, item) => {
   } else {
     // This is a new item, prepare it
     arr.push(item)
-    set(obj, item.id, item)
+    obj[item.id] = item
     if (item.screen_name && !item.screen_name.includes('@')) {
-      set(obj, item.screen_name.toLowerCase(), item)
+      obj[item.screen_name.toLowerCase()] = item
     }
     return { item, new: true }
   }
@@ -103,23 +103,23 @@ export const mutations = {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.concat([tag])
-    set(user, 'tags', newTags)
+    user['tags'] = newTags
   },
   untagUser (state, { user: { id }, tag }) {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.filter(t => t !== tag)
-    set(user, 'tags', newTags)
+    user['tags'] = newTags
   },
   updateRight (state, { user: { id }, right, value }) {
     const user = state.usersObject[id]
     let newRights = user.rights
     newRights[right] = value
-    set(user, 'rights', newRights)
+    user['rights'] = newRights
   },
   updateActivationStatus (state, { user: { id }, deactivated }) {
     const user = state.usersObject[id]
-    set(user, 'deactivated', deactivated)
+    user['deactivated'] = deactivated
   },
   setCurrentUser (state, user) {
     state.lastLoginName = user.screen_name
@@ -148,26 +148,26 @@ export const mutations = {
   clearFriends (state, userId) {
     const user = state.usersObject[userId]
     if (user) {
-      set(user, 'friendIds', [])
+      user['friendIds'] = []
     }
   },
   clearFollowers (state, userId) {
     const user = state.usersObject[userId]
     if (user) {
-      set(user, 'followerIds', [])
+      user['followerIds'] = []
     }
   },
   addNewUsers (state, users) {
     each(users, (user) => {
       if (user.relationship) {
-        set(state.relationships, user.relationship.id, user.relationship)
+        state.relationships[user.relationship.id] = user.relationship
       }
       mergeOrAdd(state.users, state.usersObject, user)
     })
   },
   updateUserRelationship (state, relationships) {
     relationships.forEach((relationship) => {
-      set(state.relationships, relationship.id, relationship)
+      state.relationships[relationship.id] = relationship
     })
   },
   saveBlockIds (state, blockIds) {
@@ -222,7 +222,7 @@ export const mutations = {
   },
   setColor (state, { user: { id }, highlighted }) {
     const user = state.usersObject[id]
-    set(user, 'highlight', highlighted)
+    user['highlight'] = highlighted
   },
   signUpPending (state) {
     state.signUpPending = true
@@ -507,6 +507,8 @@ const users = {
           store.commit('resetStatuses')
           store.dispatch('resetChats')
           store.dispatch('setLastTimeline', 'public-timeline')
+          store.dispatch('setLayoutWidth', windowWidth())
+          store.dispatch('setLayoutHeight', windowHeight())
         })
     },
     loginUser (store, accessToken) {
@@ -567,6 +569,9 @@ const users = {
               // Get user mutes
               store.dispatch('fetchMutes')
 
+              store.dispatch('setLayoutWidth', windowWidth())
+              store.dispatch('setLayoutHeight', windowHeight())
+
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
                 .then((friends) => commit('addNewUsers', friends))