frappe · RitvikSardana · Nov 27, 2025 · Nov 27, 2025 · Nov 27, 2025
diff --git a/desk/index.html b/desk/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" dir="{{boot.dir}}">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/desk/package.json b/desk/package.json
@@ -35,6 +35,7 @@
     "postcss": "^8.4.5",
     "prettier": "2.8.4",
     "tailwindcss": "^3.4.15",
+    "tailwindcss-rtl": "^0.9.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.9",
     "vite-plugin-pwa": "0.15.0"

diff --git a/desk/src/components/CommentBox.vue b/desk/src/components/CommentBox.vue
@@ -11,9 +11,9 @@
           <span class="font-medium text-gray-800">
             {{ commenter }}
           </span>
-          <span> added a</span>
+          <span> &nbsp;{{ __("added a") }}</span>
           <span class="max-w-xs truncate font-medium text-gray-800">
-            comment
+            &nbsp;{{ __("comment") }}
           </span>
         </p>
       </div>
@@ -28,13 +28,13 @@
             :placement="'right'"
             :options="[
               {
-                label: 'Edit',
+                label: __('Edit'),
                 onClick: () => handleEditMode(),
                 icon: 'edit-2',
                 condition: () => !isTicketMergedComment,
               },
               {
-                label: 'Delete',
+                label: __('Delete'),
                 onClick: () => (showDialog = true),
                 icon: 'trash-2',
               },

diff --git a/desk/src/components/CommentTextEditor.vue b/desk/src/components/CommentTextEditor.vue
@@ -67,7 +67,7 @@
               </template>
             </FileUploader>
           </div>
-          <div class="flex items-center justify-end space-x-2 w-[40%]">
+          <div class="flex items-center justify-end space-s-2 w-[40%]">
             <Button
               label="Discard"
               @click="

diff --git a/desk/src/components/CommunicationArea.vue b/desk/src/components/CommunicationArea.vue
@@ -7,7 +7,7 @@
         <Button
           ref="sendEmailRef"
           variant="ghost"
-          label="Reply"
+          :label="__('Reply')"
           :class="[showEmailBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
           @click="toggleEmailBox()"
         >
@@ -17,7 +17,7 @@
         </Button>
         <Button
           variant="ghost"
-          label="Comment"
+          :label="__('Comment')"
           :class="[showCommentBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
           @click="toggleCommentBox()"
         >
@@ -38,7 +38,7 @@
       <EmailEditor
         ref="emailEditorRef"
         :label="
-          isMobileView ? 'Send' : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
+          isMobileView ? __('Send') : isMac ? 'Send (⌘ + ⏎)' : 'Send (Ctrl + ⏎)'
         "
         v-model:content="content"
         placeholder="Hi John, we are looking into this issue."
@@ -101,8 +101,8 @@ import { useDevice } from "@/composables";
 import { useScreenSize } from "@/composables/screen";
 import { useShortcut } from "@/composables/shortcuts";
 import { showCommentBox, showEmailBox } from "@/pages/ticket/modalStates";
-import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
+import { ref, watch } from "vue";
 
 const emit = defineEmits(["update"]);
 const content = defineModel("content");

diff --git a/desk/src/components/EmailArea.vue b/desk/src/components/EmailArea.vue
@@ -57,7 +57,7 @@
           :placement="'right'"
           :options="[
             {
-              label: 'Split Ticket',
+              label: __('Split Ticket'),
               icon: LucideSplit,
               onClick: () => (showSplitModal = true),
             },
@@ -107,14 +107,14 @@
 <script setup lang="ts">
 import { AttachmentItem } from "@/components";
 import { useScreenSize } from "@/composables/screen";
+import { useAuthStore } from "@/stores/auth";
 import { dateFormat, dateTooltipFormat, timeAgo } from "@/utils";
 import { Dropdown } from "frappe-ui";
+import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import LucideSplit from "~icons/lucide/split";
 import { ReplyAllIcon, ReplyIcon } from "./icons";
 import TicketSplitModal from "./ticket/TicketSplitModal.vue";
-import { useAuthStore } from "@/stores/auth";
-import { storeToRefs } from "pinia";
 
 const props = defineProps({
   activity: {

diff --git a/desk/src/components/EmailContent.vue b/desk/src/components/EmailContent.vue
@@ -129,7 +129,7 @@ function replaceReplyToContent(
 const htmlContent = computed(
   () => `
   <!DOCTYPE html>
-  <html>
+  <html dir="${window.dir}">
   <head>
     <link rel="stylesheet" href="${cssHref.value}" />
     <base target="_blank" />

diff --git a/desk/src/components/EmailEditor.vue b/desk/src/components/EmailEditor.vue
@@ -17,20 +17,20 @@
   >
     <template #top>
       <div class="mx-6 md:mx-10 flex items-center gap-2 border-y py-2.5">
-        <span class="text-xs text-gray-500">TO:</span>
+        <span class="text-xs text-gray-500">{{ __("TO") }}:</span>
         <MultiSelectInput
           v-model="toEmailsClone"
           class="flex-1"
           :validate="validateEmail"
           :error-message="(value) => `${value} is an invalid email address`"
         />
         <Button
-          :label="'CC'"
+          :label="__('CC')"
           :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
           @click="toggleCC()"
         />
         <Button
-          :label="'BCC'"
+          :label="__('BCC')"
           :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
           @click="toggleBCC()"
         />
@@ -132,14 +132,14 @@
           <TextEditorFixedMenu class="ml-1" :buttons="textEditorMenuButtons" />
         </div>
         <div
-          class="flex items-center justify-end space-x-2 sm:mt-0 w-[40%] mr-9"
+          class="flex items-center justify-end space-s-2 sm:mt-0 w-[40%] mr-9"
         >
-          <Button label="Discard" @click="handleDiscard" />
+          <Button :label="__('Discard')" @click="handleDiscard" />
           <Button
             variant="solid"
             :disabled="emailEmpty"
             :loading="sendMail.loading"
-            :label="label"
+            :label="__(label)"
             @click="
               () => {
                 submitMail();

diff --git a/desk/src/components/HistoryBox.vue b/desk/src/components/HistoryBox.vue
@@ -7,9 +7,9 @@
         v-if="relatedActivities.length > 1"
         class="inline-flex flex-wrap gap-1.5 text-ink-gray-8 font-medium w-4/5"
       >
-        <span>{{ `${show_others ? "Hide " : "Show "}` }}</span>
+        <span>{{ `${show_others ? __("Hide ") : __("Show ")}` }}</span>
         <span>+{{ relatedActivities.length }} </span>
-        <span>changes from </span>
+        <span>{{ __("changes from") }}</span>
         <span>{{ user }}</span>
 
         <Button
@@ -26,7 +26,7 @@
         <span class="font-medium text-gray-800">
           {{ user }}
         </span>
-        <span> {{ content }}</span>
+        <span> {{ __(content) }}</span>
       </div>
 
       <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
@@ -45,7 +45,7 @@
           <span class="font-medium text-gray-800">
             {{ relatedActivity.user }}
           </span>
-          <span> {{ relatedActivity.content }}</span>
+          <span> {{ __(relatedActivity.content) }}</span>
         </div>
         <Tooltip
           :text="dateFormat(relatedActivity.creation, dateTooltipFormat)"
@@ -69,6 +69,7 @@ const props = defineProps({
     required: true,
   },
 });
+console.log(props.activity);
 
 const { user, content, creation, relatedActivities } = props.activity;
 

diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
@@ -7,7 +7,7 @@
     <QuickFilters v-if="!isMobileView" class="flex-1" />
     <div class="flex items-start gap-2 justify-end h-full" v-if="!isMobileView">
       <Button
-        label="Save Changes"
+        :label="__('Save Changes')"
         v-if="isViewUpdated && canSaveView"
         @click="handleViewUpdate"
       />
@@ -164,6 +164,7 @@ import {
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
+import { __ } from "@/translation";
 import EmptyState from "./EmptyState.vue";
 import ListRows from "./ListRows.vue";
 
@@ -222,15 +223,18 @@ const defaultOptions = reactive({
   },
   selectBannerActions: [
     {
-      label: "Delete",
+      label: __("Delete"),
       icon: "trash-2",
       onClick: (selections: Set<string>) => {
         $dialog({
-          title: "Delete",
-          message: `Are you sure you want to delete ${selections.size} item(s)?`,
+          title: __("Delete"),
+          message: __(
+            "Are you sure you want to delete {0} item(s)?",
+            ...[selections.size]
+          ),
           actions: [
             {
-              label: "Confirm",
+              label: __("Confirm"),
               variant: "solid",
               onClick({ close }) {
                 handleBulkDelete(close, selections);
@@ -250,7 +254,7 @@ function handleBulkDelete(hide: Function, selections: Set<string>) {
     items: JSON.stringify(Array.from(selections)),
     doctype: props.options.doctype,
   }).then(() => {
-    toast.success("Item(s) deleted successfully");
+    toast.success(__("Item(s) deleted successfully"));
     hide();
     reset();
   });
@@ -272,7 +276,7 @@ const { isMobileView } = useScreenSize();
 
 const defaultEmptyState = {
   icon: "",
-  title: "No Data Found",
+  title: __("No Data Found"),
 };
 
 const defaultParams = reactive({

diff --git a/desk/src/components/Settings/settingsModal.ts b/desk/src/components/Settings/settingsModal.ts
@@ -1,29 +1,29 @@
+import { FieldDependencyIcon, PhoneIcon } from "@/components/icons";
+import { useAuthStore } from "@/stores/auth";
+import { __ } from "@/translation";
+import { Avatar } from "frappe-ui";
 import { computed, h, markRaw, ref } from "vue";
-import Agents from "./Agents.vue";
-import EmailConfig from "./EmailConfig.vue";
-import TeamsConfig from "./Teams/TeamsConfig.vue";
-import Sla from "./Sla/Sla.vue";
-import HolidayList from "./Holiday/Holiday.vue";
-import FieldDependencyConfig from "./FieldDependency/FieldDependencyConfig.vue";
-import InviteAgents from "./InviteAgents.vue";
+import Briefcase from "~icons/lucide/briefcase";
 import LucideMail from "~icons/lucide/mail";
 import LucideMailOpen from "~icons/lucide/mail-open";
+import SettingsGear from "~icons/lucide/settings";
+import Settings from "~icons/lucide/settings-2";
+import ShieldCheck from "~icons/lucide/shield-check";
 import LucideUser from "~icons/lucide/user";
 import LucideUserPlus from "~icons/lucide/user-plus";
 import LucideUsers from "~icons/lucide/users";
-import ShieldCheck from "~icons/lucide/shield-check";
-import Briefcase from "~icons/lucide/briefcase";
+import Agents from "./Agents.vue";
 import AssignmentRules from "./Assignment Rules/AssignmentRules.vue";
-import Settings from "~icons/lucide/settings-2";
-import { FieldDependencyIcon, PhoneIcon } from "@/components/icons";
-import Telephony from "./Telephony/Telephony.vue";
+import EmailConfig from "./EmailConfig.vue";
 import { EmailNotifications } from "./EmailNotifications";
-import { __ } from "@/translation";
-import Profile from "./Profile/Profile.vue";
-import { Avatar } from "frappe-ui";
-import { useAuthStore } from "@/stores/auth";
+import FieldDependencyConfig from "./FieldDependency/FieldDependencyConfig.vue";
 import General from "./General/General.vue";
-import SettingsGear from "~icons/lucide/settings";
+import HolidayList from "./Holiday/Holiday.vue";
+import InviteAgents from "./InviteAgents.vue";
+import Profile from "./Profile/Profile.vue";
+import Sla from "./Sla/Sla.vue";
+import TeamsConfig from "./Teams/TeamsConfig.vue";
+import Telephony from "./Telephony/Telephony.vue";
 
 const auth = useAuthStore();
 

diff --git a/desk/src/components/SidebarLink.vue b/desk/src/components/SidebarLink.vue
@@ -33,7 +33,7 @@
     </span>
 
     <div
-      class="-all ml-2 flex shrink-0 grow items-center justify-between text-sm duration-300 ease-in-out"
+      class="-all ms-2 flex shrink-0 grow items-center justify-between text-sm duration-300 ease-in-out"
       :class="{
         'opacity-100': isExpanded,
         'opacity-0': !isExpanded,

diff --git a/desk/src/components/TicketField.vue b/desk/src/components/TicketField.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex gap-2 px-5 pb-1 leading-5 first:mt-3 items-center">
     <div class="w-[106px] shrink-0 truncate text-sm text-gray-600">
-      <Tooltip :text="field.label">
-        <span>{{ field.label }}</span>
+      <Tooltip :text="__(field.label)">
+        <span>{{ __(field.label) }}</span>
       </Tooltip>
       <span v-if="field.required" class="text-red-500"> * </span>
     </div>

diff --git a/desk/src/components/UserMenu.vue b/desk/src/components/UserMenu.vue
@@ -10,16 +10,16 @@
           class="flex flex-1 flex-col text-left duration-300 ease-in-out overflow-hidden"
           :class="
             !sidebarStore.isExpanded
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
+              ? 'ms-0 w-0 overflow-hidden opacity-0'
+              : 'ms-2 w-auto opacity-100'
           "
         >
           <div
-            class="text-base font-medium leading-none text-gray-900 truncate"
+            class="text-base font-medium leading-none text-gray-900 truncate rtl:text-right"
           >
             {{ config.brandName || "Helpdesk" }}
           </div>
-          <div class="mt-1 text-sm leading-none text-gray-700">
+          <div class="mt-1 text-sm leading-none text-gray-700 rtl:text-right">
             {{ authStore.userName }}
           </div>
         </div>
@@ -43,11 +43,11 @@
 </template>
 
 <script setup lang="ts">
-import { Dropdown, Avatar } from "frappe-ui";
+import BrandLogo from "@/components/BrandLogo.vue";
 import { useAuthStore } from "@/stores/auth";
-import { useSidebarStore } from "@/stores/sidebar";
 import { useConfigStore } from "@/stores/config";
-import BrandLogo from "@/components/BrandLogo.vue";
+import { useSidebarStore } from "@/stores/sidebar";
+import { Dropdown } from "frappe-ui";
 
 const config = useConfigStore();
 

diff --git a/desk/src/components/ViewBreadcrumbs.vue b/desk/src/components/ViewBreadcrumbs.vue
@@ -4,15 +4,15 @@
       :to="{ name: routeName }"
       class="px-0.5 py-1 text-lg font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-5 hover:text-ink-gray-7 flex items-center justify-center"
     >
-      {{ isMobileView ? "..." : label }}
+      {{ isMobileView ? "..." : __(label) }}
     </router-link>
     <span class="mx-0.5 text-base text-ink-gray-4" aria-hidden="true"> / </span>
     <Dropdown :options="options">
       <template #default="{ open }">
         <Button
           variant="ghost"
           class="text-lg font-medium text-nowrap"
-          :label="currentView.label"
+          :label="__(currentView.label)"
         >
           <template #prefix>
             <component