fix(RTL): initialize language direction check once in utils

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

src/components/NcActionButton/NcActionButton.vue

@@ -355,8 +355,8 @@ export default {
 			<span v-else class="action-button__text">{{ text }}</span>
 
 			<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->
-			<ChevronRightIcon v-if="isMenu && !isRTL" :size="20" class="action-button__menu-icon" />
-			<ChevronLeftIcon v-else-if="isMenu && isRTL" :size="20" class="action-button__menu-icon" />
+			<ChevronRightIcon v-if="isMenu && !isRtl" :size="20" class="action-button__menu-icon" />
+			<ChevronLeftIcon v-else-if="isMenu && isRtl" :size="20" class="action-button__menu-icon" />
 			<CheckIcon v-else-if="isChecked === true" :size="20" class="action-button__pressed-icon" />
 			<span v-else-if="isChecked === false" class="action-button__pressed-icon material-design-icon" />
 
@@ -371,7 +371,7 @@ import CheckIcon from 'vue-material-design-icons/Check.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ActionTextMixin from '../../mixins/actionText.js'
-import { isRTL } from '@nextcloud/l10n'
+import { isRtl } from '../../utils/rtl.ts'
 
 /**
  * Button component to be used in Actions
@@ -386,7 +386,7 @@ export default {
 	},
 	setup() {
 		return {
-			isRTL: isRTL(),
+			isRtl,
 		}
 	},
 	mixins: [ActionTextMixin],

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -82,7 +82,7 @@ export default {
 				<!-- allow the custom font to inject a ::before
 					not possible on input[type=submit] -->
 				<label v-show="!disabled" :for="id" class="action-text-editable__label">
-					<ArrowLeft v-if="isRTL" :size="20" />
+					<ArrowLeft v-if="isRtl" :size="20" />
 					<ArrowRight v-else :size="20" />
 				</label>
 			</form>
@@ -98,7 +98,7 @@ import GenRandomId from '../../utils/GenRandomId.js'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
-import { isRTL } from '@nextcloud/l10n'
+import { isRtl } from '../../utils/rtl.ts'
 
 export default {
 	name: 'NcActionTextEditable',
@@ -170,7 +170,7 @@ export default {
 		const model = useModelMigration('value', 'update:value')
 		return {
 			model,
-			isRTL: isRTL(),
+			isRtl,
 		}
 	},
 

src/components/NcAppContent/NcAppContent.vue

@@ -77,7 +77,7 @@ The list size must be between the min and the max width value.
 					:class="{ 'splitpanes--horizontal': layout === 'horizontal-split',
 						'splitpanes--vertical': layout === 'vertical-split'
 					}"
-					:rtl="isRTL"
+					:rtl="isRtl"
 					@resized="handlePaneResize">
 					<Pane class="splitpanes__pane-list"
 						:size="listPaneSize || paneDefaults.list.size"
@@ -112,7 +112,7 @@ import { Splitpanes, Pane } from 'splitpanes'
 
 import 'splitpanes/dist/splitpanes.css'
 import { emit } from '@nextcloud/event-bus'
-import { isRTL } from '@nextcloud/l10n'
+import { isRtl } from '../../utils/rtl.ts'
 
 const browserStorage = getBuilder('nextcloud').persist().build()
 
@@ -227,7 +227,7 @@ export default {
 	setup() {
 		return {
 			isMobile: useIsMobile(),
-			isRTL: isRTL(),
+			isRtl,
 		}
 	},
 

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -10,7 +10,7 @@
 		class="app-details-toggle"
 		:class="{ 'app-details-toggle--mobile': isMobile }">
 		<template #icon>
-			<ArrowLeft v-if="isRTL" :size="20" />
+			<ArrowLeft v-if="isRtl" :size="20" />
 			<ArrowRight v-else :size="20" />
 		</template>
 	</NcButton>
@@ -27,7 +27,7 @@ import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
-import { isRTL } from '@nextcloud/l10n'
+import { isRtl } from '../../utils/rtl.ts'
 
 export default {
 	name: 'NcAppDetailsToggle',
@@ -43,7 +43,7 @@ export default {
 	},
 	setup() {
 		return {
-			isRTL: isRTL(),
+			isRtl,
 			isMobile: useIsMobile(),
 		}
 	},

src/utils/rtl.ts

@@ -0,0 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { isRTL } from '@nextcloud/l10n'
+
+export const isRtl = isRTL()