fixed up language

src/App.js

@@ -2,30 +2,35 @@ import { throttle } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 
-import DesktopNav from './components/desktop_nav/desktop_nav.vue'
-import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
-import FeaturesPanel from './components/features_panel/features_panel.vue'
-import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
-import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
-import MediaModal from './components/media_modal/media_modal.vue'
-import MobileNav from './components/mobile_nav/mobile_nav.vue'
-import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
-import NavPanel from './components/nav_panel/nav_panel.vue'
-import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
-import ShoutPanel from './components/shout_panel/shout_panel.vue'
-import SideDrawer from './components/side_drawer/side_drawer.vue'
-import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
-import UserPanel from './components/user_panel/user_panel.vue'
-import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
-import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
-import { getOrCreateServiceWorker } from './services/sw/sw'
-import { windowHeight, windowWidth } from './services/window_utils/window_utils'
+import DesktopNav from 'src/components/desktop_nav/desktop_nav.vue'
+import EditStatusModal from 'src/components/edit_status_modal/edit_status_modal.vue'
+import FeaturesPanel from 'src/components/features_panel/features_panel.vue'
+import GlobalNoticeList from 'src/components/global_notice_list/global_notice_list.vue'
+import InstanceSpecificPanel from 'src/components/instance_specific_panel/instance_specific_panel.vue'
+import MediaModal from 'src/components/media_modal/media_modal.vue'
+import MobileNav from 'src/components/mobile_nav/mobile_nav.vue'
+import MobilePostStatusButton from 'src/components/mobile_post_status_button/mobile_post_status_button.vue'
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
+import PostStatusModal from 'src/components/post_status_modal/post_status_modal.vue'
+import ShoutPanel from 'src/components/shout_panel/shout_panel.vue'
+import SideDrawer from 'src/components/side_drawer/side_drawer.vue'
+import StatusHistoryModal from 'src/components/status_history_modal/status_history_modal.vue'
+import UserPanel from 'src/components/user_panel/user_panel.vue'
+import UserReportingModal from 'src/components/user_reporting_modal/user_reporting_modal.vue'
+import WhoToFollowPanel from 'src/components/who_to_follow_panel/who_to_follow_panel.vue'
 
+import { useI18nStore } from 'src/stores/i18n.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useShoutStore } from 'src/stores/shout.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
+import { getOrCreateServiceWorker } from 'src/services/sw/sw'
+import {
+  windowHeight,
+  windowWidth,
+} from 'src/services/window_utils/window_utils'
+
 export default {
   name: 'app',
   components: {
@@ -71,6 +76,7 @@ export default {
   },
   created() {
     document.getElementById('modal').classList = ['-' + this.layoutType]
+    useI18nStore().setLanguage()
 
     // Create bound handlers
     this.updateScrollState = throttle(this.scrollHandler, 200)

src/lib/language.js

@@ -1,24 +1,13 @@
-import Cookies from 'js-cookie'
-
-import { useEmojiStore } from 'src/stores/emoji.js'
 import { useI18nStore } from 'src/stores/i18n.js'
 
-import messages from 'src/i18n/messages'
-import localeService from 'src/services/locale/locale.service.js'
-
-const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
-
 export const piniaLanguagePlugin = ({ store, options }) => {
   if (store.$id === 'sync_config') {
     store.$onAction(({ name, args }) => {
-      const { path, value } = args[0]
-      if (name === 'setPreference' && path === 'simple.interfaceLanguage') {
-        messages.setLanguage(useI18nStore().i18n, value)
-        useEmojiStore().loadUnicodeEmojiData(value)
-        Cookies.set(
-          BACKEND_LANGUAGE_COOKIE_NAME,
-          localeService.internalToBackendLocaleMulti(value),
-        )
+      if (name === 'setPreference') {
+        const { path, value } = args[0]
+        if (path === 'simple.interfaceLanguage') {
+          useI18nStore().setLanguage(value)
+        }
       }
     })
   }

src/stores/emoji.js

@@ -209,6 +209,7 @@ export const useEmojiStore = defineStore('emoji', {
             )
           }
 
+          console.log('EMOJI', useInstanceStore().server)
           const emoji = Object.entries(values)
             .map(([key, value]) => {
               const imageUrl = value.image_url

src/stores/i18n.js

@@ -1,5 +1,14 @@
+import Cookies from 'js-cookie'
 import { defineStore } from 'pinia'
 
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+import messages from 'src/i18n/messages'
+import localeService from 'src/services/locale/locale.service.js'
+
+const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
+
 export const useI18nStore = defineStore('i18n', {
   state: () => ({
     i18n: null,
@@ -10,5 +19,15 @@ export const useI18nStore = defineStore('i18n', {
         i18n: newI18n.global,
       })
     },
+    setLanguage(originalValue) {
+      const value =
+        originalValue || useSyncConfigStore().mergedConfig.interfaceLanguage
+      messages.setLanguage(this.i18n, value)
+      useEmojiStore().loadUnicodeEmojiData(value)
+      Cookies.set(
+        BACKEND_LANGUAGE_COOKIE_NAME,
+        localeService.internalToBackendLocaleMulti(value),
+      )
+    },
   },
 })