some recategorization of options...

src/App.js

@@ -60,10 +60,10 @@ export default {
     },
     logo () { return this.$store.state.config.logo },
     style () { return { 'background-image': `url(${this.background})` } },
-    sitename () { return this.$store.state.config.name },
+    sitename () { return this.$store.state.interface.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
-    suggestionsEnabled () { return this.$store.state.config.suggestionsEnabled },
-    showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel }
+    suggestionsEnabled () { return this.$store.state.interface.suggestionsEnabled },
+    showInstanceSpecificPanel () { return this.$store.state.interface.showInstanceSpecificPanel }
   },
   methods: {
     activatePanel (panelName) {

src/components/login_form/login_form.js

@@ -5,7 +5,7 @@ const LoginForm = {
   }),
   computed: {
     loggingIn () { return this.$store.state.users.loggingIn },
-    registrationOpen () { return this.$store.state.config.registrationOpen }
+    registrationOpen () { return this.$store.state.interface.registrationOpen }
   },
   methods: {
     submit () {

src/components/registration/registration.js

@@ -5,11 +5,11 @@ const registration = {
     registering: false
   }),
   created () {
-    if ((!this.$store.state.config.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) {
+    if ((!this.$store.state.interface.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) {
       this.$router.push('/main/all')
     }
     // Seems like this doesn't work at first page open for some reason
-    if (this.$store.state.config.registrationOpen && this.token) {
+    if (this.$store.state.interface.registrationOpen && this.token) {
       this.$router.push('/registration')
     }
   },

src/components/settings/settings.js

@@ -44,8 +44,7 @@ const settings = {
       return this.$store.state.users.currentUser
     },
     currentSaveStateNotice () {
-      console.log(this.$store.state.config._internal.currentSaveStateNotice && this.$store.state.config._internal.currentSaveStateNotice.error)
-      return this.$store.state.config._internal.currentSaveStateNotice
+      return this.$store.state.interface.settings.currentSaveStateNotice
     }
   },
   watch: {

src/components/settings/settings.vue

@@ -5,15 +5,17 @@
       {{$t('settings.settings')}}
     </div>
 
-    <template v-if="currentSaveStateNotice">
-      <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
-        Errr
-      </div>
+    <transition name="fade">
+      <template v-if="currentSaveStateNotice">
+        <div @click.prevent class="alert error" v-if="!currentSaveStateNotice.error">
+          Errr
+        </div>
 
-      <div @click.prevent class="alert success" v-if="!currentSaveStateNotice.error">
-        Succ
-      </div>
+        <div @click.prevent class="alert success" v-if="!currentSaveStateNotice.error">
+          Succ
+        </div>
     </template>
+    </transition>
   </div>
   <div class="panel-body">
     <tab-switcher>

src/main.js

@@ -14,6 +14,7 @@ import Registration from './components/registration/registration.vue'
 import UserSettings from './components/user_settings/user_settings.vue'
 import FollowRequests from './components/follow_requests/follow_requests.vue'
 
+import interfaceModule from './modules/interface.js'
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
@@ -67,8 +68,9 @@ const persistedStateOptions = {
   ]
 }
 
-const store = new Vuex.Store({
+const store = console.log('interfaceModule') || new Vuex.Store({
   modules: {
+    interface: interfaceModule,
     statuses: statusesModule,
     users: usersModule,
     api: apiModule,
@@ -92,10 +94,11 @@ window.fetch('/api/statusnet/config.json')
   .then((data) => {
     const {name, closed: registrationClosed, textlimit, server} = data.site
 
-    store.dispatch('setOption', { name: 'name', value: name })
-    store.dispatch('setOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
-    store.dispatch('setOption', { name: 'textlimit', value: parseInt(textlimit) })
-    store.dispatch('setOption', { name: 'server', value: server })
+    console.log(store)
+    store.dispatch('setInstanceOption', { name: 'name', value: name })
+    store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
+    store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
+    store.dispatch('setInstanceOption', { name: 'server', value: server })
 
     var apiConfig = data.site.pleromafe
 

src/modules/config.js

@@ -4,7 +4,6 @@ import StyleSetter from '../services/style_setter/style_setter.js'
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
 const defaultState = {
-  name: 'Pleroma FE',
   colors: {},
   collapseMessageWithSubject: false,
   hideAttachments: false,
@@ -26,11 +25,7 @@ const defaultState = {
   },
   muteWords: [],
   highlight: {},
-  interfaceLanguage: browserLocale,
-  _internal: {
-    currentSaveStateNotice: {},
-    noticeClearTimeout: null
-  }
+  interfaceLanguage: browserLocale
 }
 
 const config = {
@@ -46,36 +41,15 @@ const config = {
       } else {
         del(state.highlight, user)
       }
-    },
-    settingsSaved (state, { success, error }) {
-      if (success) {
-        if (state.noticeClearTimeout) {
-          clearTimeout(state.noticeClearTimeout)
-        }
-        set(state._internal, 'currentSaveStateNotice', { error: false, data: success })
-        set(state._internal, 'noticeClearTimeout',
-            setTimeout(() => del(state._internal, 'currentSaveStateNotice'), 2000))
-      } else {
-        set(state._internal, 'currentSaveStateNotice', { error: true, errorData: error })
-      }
     }
   },
   actions: {
-    setPageTitle ({state}, option = '') {
-      document.title = `${option} ${state.name}`
-    },
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', {user, color, type})
     },
-    settingsSaved ({ commit, dispatch }, { success, error }) {
-      commit('settingsSaved', { success, error })
-    },
     setOption ({ commit, dispatch }, { name, value }) {
       commit('setOption', {name, value})
       switch (name) {
-        case 'name':
-          dispatch('setPageTitle')
-          break
         case 'theme':
           StyleSetter.setPreset(value, commit)
           break

src/modules/interface.js

@@ -0,0 +1,53 @@
+import { set, delete as del } from 'vue'
+
+const defaultState = {
+  name: 'Pleroma FE',
+  registrationOpen: true,
+  textlimit: 5000,
+  server: 'http://localhost:4040/',
+  settings: {
+    currentSaveStateNotice: null,
+    noticeClearTimeout: null
+  }
+}
+
+const interfaceMod = {
+  state: defaultState,
+  mutations: {
+    setInstanceOption (state, { name, value }) {
+      console.log(state)
+      console.log(name)
+      set(state, name, value)
+    },
+    settingsSaved (state, { success, error }) {
+      if (success) {
+        if (state.noticeClearTimeout) {
+          clearTimeout(state.noticeClearTimeout)
+        }
+        set(state.settings, 'currentSaveStateNotice', { error: false, data: success })
+        set(state.settings, 'noticeClearTimeout',
+            setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
+      } else {
+        set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error })
+      }
+    }
+  },
+  actions: {
+    setPageTitle ({state}, option = '') {
+      document.title = `${option} ${state.name}`
+    },
+    settingsSaved ({ commit, dispatch }, { success, error }) {
+      commit('settingsSaved', { success, error })
+    },
+    setInstanceOption ({ commit, dispatch }, { name, value }) {
+      commit('setInstanceOption', {name, value})
+      switch (name) {
+        case 'name':
+          dispatch('setPageTitle')
+          break
+      }
+    }
+  }
+}
+
+export default interfaceMod