refactor: use inject for languageDirection

- remove unnecessary spacer in pageheader when rtl

src/App.vue

@@ -54,7 +54,7 @@ import { initializeInstance } from './utils/initialization';
 import { checkForUpdates } from './utils/ipcCalls';
 import { updateConfigFiles } from './utils/misc';
 import { Search } from './utils/search';
-import { routeTo } from './utils/ui';
+import { routeTo, systemLanguage } from './utils/ui';
 import { Shortcuts, useKeys } from './utils/vueUtils';
 
 export default {
@@ -69,8 +69,6 @@ export default {
       companyName: '',
       searcher: null,
       shortcuts: null,
-      languageDirection: 'ltr',
-      language: '',
     };
   },
   provide() {
@@ -88,10 +86,6 @@ export default {
     WindowsTitleBar,
   },
   async mounted() {
-    this.language = fyo.config.get('language');
-    this.languageDirection = RTL_LANGUAGES.includes(this.language)
-      ? 'rtl'
-      : 'ltr';
     this.shortcuts = new Shortcuts(this.keys);
     const lastSelectedFilePath = fyo.config.get(
       ConfigKeys.LastSelectedFilePath,
@@ -109,6 +103,14 @@ export default {
       await this.showDbSelector();
     }
   },
+  computed: {
+    language() {
+      return systemLanguage.value;
+    },
+    languageDirection() {
+      return RTL_LANGUAGES.includes(this.language) ? 'rtl' : 'ltr';
+    },
+  },
   methods: {
     async setDesk(filePath) {
       this.activeScreen = 'Desk';

src/components/PageHeader.vue

@@ -8,7 +8,7 @@
   >
     <Transition name="spacer">
       <div
-        v-if="!sidebar && platform === 'Mac'"
+        v-if="!sidebar && platform === 'Mac' && languageDirection !== 'rtl'"
         class="h-full"
         :class="sidebar ? '' : 'w-tl me-4 border-e'"
       />
@@ -18,7 +18,8 @@
     </h1>
     <div
       class="flex items-stretch window-no-drag gap-2 ms-auto"
-      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-20' : ''">
+      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
+    >
       <slot />
       <div class="border-e" v-if="showBorder" />
       <BackLink v-if="backLink" class="window-no-drag rtl-rotate-180" />
@@ -30,11 +31,9 @@
 import { Transition } from 'vue';
 import BackLink from './BackLink.vue';
 import SearchBar from './SearchBar.vue';
-import { fyo } from 'src/initFyo';
-import { RTL_LANGUAGES } from 'fyo/utils/consts';
 
 export default {
-  inject: ['sidebar'],
+  inject: ['sidebar', 'languageDirection'],
   props: {
     title: { type: String, default: '' },
     backLink: { type: Boolean, default: true },
@@ -47,13 +46,6 @@ export default {
     showBorder() {
       return !!this.$slots.default && this.searchborder;
     },
-    languageDirection(){
-      const language = fyo.config.get('language');
-      const languageDirection = RTL_LANGUAGES.includes(language)
-        ? 'rtl'
-        : 'ltr';
-      return languageDirection;
-    }
   },
 };
 </script>

src/components/Sidebar.vue

@@ -9,7 +9,9 @@
       <!-- Company name and DB Switcher -->
       <div
         class="px-4 flex flex-row items-center justify-between mb-4"
-        :class="platform === 'Mac' && languageDirection === 'ltr' ? 'mt-10' : 'mt-2'"
+        :class="
+          platform === 'Mac' && languageDirection === 'ltr' ? 'mt-10' : 'mt-2'
+        "
       >
         <h6
           class="
@@ -164,10 +166,10 @@ import { getSidebarConfig } from 'src/utils/sidebarConfig';
 import { docsPath, routeTo } from 'src/utils/ui';
 import router from '../router';
 import Icon from './Icon.vue';
-import { RTL_LANGUAGES } from 'fyo/utils/consts';
 
 export default {
   components: [Button],
+  inject: ['languageDirection'],
   emits: ['change-db-file', 'toggle-sidebar'],
   data() {
     return {
@@ -180,13 +182,6 @@ export default {
     appVersion() {
       return fyo.store.appVersion;
     },
-    languageDirection(){
-      const language = fyo.config.get('language');
-      const languageDirection = RTL_LANGUAGES.includes(language)
-        ? 'rtl'
-        : 'ltr';
-      return languageDirection;
-    }
   },
   components: {
     Icon,

src/utils/language.ts

@@ -3,7 +3,7 @@ import { DEFAULT_LANGUAGE } from 'fyo/utils/consts';
 import { setLanguageMapOnTranslationString } from 'fyo/utils/translation';
 import { fyo } from 'src/initFyo';
 import { IPC_ACTIONS, IPC_MESSAGES } from 'utils/messages';
-import { showToast } from './ui';
+import { showToast, systemLanguage } from './ui';
 
 // Language: Language Code in books/translations
 export const languageCodeMap: Record<string, string> = {
@@ -42,6 +42,7 @@ export async function setLanguageMap(
 
   if (success && !usingDefault) {
     fyo.config.set('language', language);
+    systemLanguage.value = language;
   }
 
   if (!dontReload && success && initLanguage !== oldLanguage) {

src/utils/ui.ts

@@ -24,6 +24,7 @@ import {
 } from './types';
 
 export const docsPath = ref('');
+export const systemLanguage = ref('');
 
 export async function openQuickEdit({
   doc,