feat: Add comprehensive internationalization (i18n) support to Helpdesk

This commit implements full internationalization support for the Helpdesk application,
enabling multi-language UI support with proper translation infrastructure.

## Key Changes

### Translation Infrastructure
- **New Translation Plugin**: Created `translationsPlugin.js` that integrates with Frappe's
  boot messages system for seamless translation loading
- **Boot Data Integration**: Modified `index.py` to properly load translations using
  `load_translations()` and include them in boot data
- **CSRF Token Fix**: Resolved CSRF token issues by properly setting up `window.csrf_token`
  and `window.frappe.boot` in the HTML template

### UI Components Translation
- **Dashboard**: Translated all text elements including filters, date ranges, and labels
- **Tickets Page**: Comprehensive translation of ticket list, actions, and view management
- **Sidebar**: Translated navigation items, user menu, and action buttons
- **Forms and Inputs**: Added translation support for placeholders and form labels

### Technical Implementation
- **Vue Integration**: Used Vue's `inject()` pattern for translation function access
- **Template Updates**: Modified HTML template to properly expose boot data and CSRF tokens
- **Build Configuration**: Adjusted Vite config to handle translation data correctly
- **Type Safety**: Maintained TypeScript compatibility with proper type annotations

## Translation Coverage
- Navigation elements (Dashboard, Tickets, Search, etc.)
- Form inputs and placeholders
- Action buttons and dropdowns
- Status badges and labels
- Date range selectors
- View management (Create, Edit, Delete views)
- User interface messages

## Technical Details
- Uses Frappe's standard `__messages` system from boot data
- Supports placeholder replacement for dynamic content
- Maintains backward compatibility with existing functionality
- Follows Vue 3 composition API patterns
- Implements proper error handling for missing translations

## Testing
- Verified translation loading from `window.frappe.boot.__messages`
- Tested UI elements display translated text correctly
- Confirmed CSRF token functionality works properly
- Validated build process generates correct output

This implementation follows Frappe's standard patterns used in other apps like
Drive and HRMS, ensuring consistency across the ecosystem.

Fixes: Translation support for multi-language deployments
Related: Internationalization infrastructure for Helpdesk

Author: GizAI

desk/index.html

@@ -209,6 +209,11 @@
       window.favicon = "{{ favicon }}";
       window.site_name = "{{ site_name }}";
 
+      // Set up frappe object and boot data
+      if (!window.frappe) window.frappe = {};
+      window.frappe.boot = {{ boot | safe }};
+      window.csrf_token = "{{ csrf_token }}";
+
       document.querySelectorAll("link[rel='icon']").forEach((link) => {
         link.href = window.favicon;
       });

desk/src/components/layouts/Sidebar.vue

@@ -9,7 +9,7 @@
     <UserMenu class="mb-2" :options="profileSettings" />
     <SidebarLink
       v-if="!isCustomerPortal"
-      label="Search"
+      :label="__('Search')"
       class="my-0.5"
       :icon="LucideSearch"
       :on-click="() => openCommandPalette()"
@@ -25,7 +25,7 @@
     <SidebarLink
       v-if="!isCustomerPortal"
       class="relative my-0.5 min-h-7"
-      label="Dashboard"
+      :label="__('Dashboard')"
       :icon="LucideLayoutDashboard"
       :to="'Dashboard'"
       :is-active="isActiveTab('Dashboard')"
@@ -40,7 +40,7 @@
       />
       <SidebarLink
         class="relative my-0.5"
-        label="Notifications"
+        :label="__('Notifications')"
         :icon="LucideBell"
         :on-click="() => notificationStore.toggle()"
         :is-expanded="isExpanded"
@@ -117,7 +117,7 @@
       <SidebarLink
         v-if="isOnboardingStepsCompleted && !isCustomerPortal"
         :icon="HelpIcon"
-        :label="'Help'"
+        :label="__('Help')"
         :is-expanded="isExpanded"
         @click="
           () => {
@@ -131,7 +131,7 @@
         :icon="isExpanded ? LucideArrowLeftFromLine : LucideArrowRightFromLine"
         :is-active="false"
         :is-expanded="isExpanded"
-        :label="isExpanded ? 'Collapse' : 'Expand'"
+        :label="isExpanded ? __('Collapse') : __('Expand')"
         :on-click="() => (isExpanded = !isExpanded)"
       />
     </div>
@@ -176,6 +176,9 @@ import { confirmLoginToFrappeCloud } from "@/composables/fc";
 import { useScreenSize } from "@/composables/screen";
 import { currentView, useView } from "@/composables/useView";
 import { showNewContactModal } from "@/pages/desk/contact/dialogState";
+
+// Get translation function
+const __ = (window as any).__ || ((text: string) => text);
 import {
   showAssignmentModal,
   showCommentBox,
@@ -293,7 +296,7 @@ function parseViews(views) {
 
 const customerPortalDropdown = computed(() => [
   {
-    label: "Log out",
+    label: __("Log out"),
     icon: "log-out",
     onClick: () => authStore.logout(),
   },
@@ -304,7 +307,7 @@ const agentPortalDropdown = computed(() => [
     component: markRaw(Apps),
   },
   {
-    label: "Customer portal",
+    label: __("Customer portal"),
     icon: "users",
     onClick: () => {
       const path = router.resolve({ name: "TicketsCustomer" });
@@ -313,22 +316,22 @@ const agentPortalDropdown = computed(() => [
   },
   {
     icon: "life-buoy",
-    label: "Support",
+    label: __("Support"),
     onClick: () => window.open("https://t.me/frappedesk"),
   },
   {
     icon: "book-open",
-    label: "Docs",
+    label: __("Docs"),
     onClick: () => window.open("https://docs.frappe.io/helpdesk"),
   },
   {
-    label: "Login to Frappe Cloud",
+    label: __("Login to Frappe Cloud"),
     icon: FrappeCloudIcon,
     onClick: () => confirmLoginToFrappeCloud(),
     condition: () => !isMobileView.value && window.is_fc_site,
   },
   {
-    label: "Settings",
+    label: __("Settings"),
     icon: "settings",
     onClick: () => (showSettingsModal.value = true),
     condition: () => authStore.isAdmin || authStore.isManager,
@@ -338,7 +341,7 @@ const agentPortalDropdown = computed(() => [
     hideLabel: true,
     items: [
       {
-        label: "Log out",
+        label: __("Log out"),
         icon: "log-out",
         onClick: () => authStore.logout(),
       },

desk/src/main.js

@@ -21,6 +21,7 @@ import "./index.css";
 import { router } from "./router";
 import { socket } from "./socket";
 import { posthogPlugin } from "./telemetry";
+import { translationsPlugin } from "./plugins/translationsPlugin";
 
 const globalComponents = {
   Badge,
@@ -46,6 +47,7 @@ const pinia = createPinia();
 const app = createApp(App);
 
 app.use(resourcesPlugin);
+app.use(translationsPlugin);
 app.use(pinia);
 app.use(router);
 app.use(posthogPlugin);
@@ -60,9 +62,8 @@ if (import.meta.env.DEV) {
   frappeRequest({
     url: "/api/method/helpdesk.www.helpdesk.index.get_context_for_dev",
   }).then((values) => {
-    for (let key in values) {
-      window[key] = values[key];
-    }
+    if (!window.frappe) window.frappe = {};
+    window.frappe.boot = values;
     app.mount("#app");
   });
 } else {

desk/src/pages/dashboard/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <LayoutHeader>
       <template #left-header>
-        <div class="text-lg font-medium text-gray-900">Dashboard</div>
+        <div class="text-lg font-medium text-gray-900">{{ __("Dashboard") }}</div>
       </template>
       <template #right-header> </template>
     </LayoutHeader>
@@ -15,7 +15,7 @@
           :options="options"
           class="form-control !w-48"
           v-model="preset"
-          placeholder="Select Range"
+          :placeholder="__('Select Range')"
           @change="filters.period = preset"
           :button="{
             label: preset,
@@ -36,7 +36,7 @@
           ref="datePickerRef"
           v-model="filters.period"
           variant="outline"
-          placeholder="Period"
+          :placeholder="__('Period')"
           @update:model-value="
             (e:string) => {
               showDatePicker = false;
@@ -53,7 +53,7 @@
           v-if="isManager"
           class="form-control w-48"
           doctype="HD Team"
-          placeholder="Team"
+          :placeholder="__('Team')"
           v-model="filters.team"
           :page-length="5"
           :hide-me="true"
@@ -66,7 +66,7 @@
           v-if="isManager"
           class="form-control w-48"
           doctype="HD Agent"
-          placeholder="Agent"
+          :placeholder="__('Agent')"
           v-model="filters.agent"
           :page-length="5"
           :filters="agentFilter"
@@ -147,10 +147,12 @@ import {
   Tooltip,
   usePageMeta,
 } from "frappe-ui";
-import { computed, h, onMounted, reactive, ref, watch } from "vue";
+import { computed, h, inject, onMounted, reactive, ref, watch } from "vue";
 
 const { isManager, userId } = useAuthStore();
 
+const __ = inject("$translate");
+
 const filters = reactive({
   period: getLastXDays(),
   agent: null,
@@ -258,58 +260,58 @@ function getLastXDays(range: number = 30): string {
 
 const showDatePicker = ref(false);
 const datePickerRef = ref(null);
-const preset = ref("Last 30 Days");
+const preset = ref(__("Last 30 Days"));
 
 const options = computed(() => [
   {
-    group: "Presets",
+    group: __("Presets"),
     hideLabel: true,
     items: [
       {
-        label: "Today",
+        label: __("Today"),
         onClick: () => {
-          preset.value = "Today";
+          preset.value = __("Today");
           filters.period = getLastXDays(0);
         },
       },
       {
-        label: "Last 7 Days",
+        label: __("Last 7 Days"),
         onClick: () => {
-          preset.value = "Last 7 Days";
+          preset.value = __("Last 7 Days");
           filters.period = getLastXDays(7);
         },
       },
       {
-        label: "Last 30 Days",
+        label: __("Last 30 Days"),
         onClick: () => {
-          preset.value = "Last 30 Days";
+          preset.value = __("Last 30 Days");
           filters.period = getLastXDays(30);
         },
       },
       {
-        label: "Last 60 Days",
+        label: __("Last 60 Days"),
         onClick: () => {
-          preset.value = "Last 60 Days";
+          preset.value = __("Last 60 Days");
           filters.period = getLastXDays(60);
         },
       },
       {
-        label: "Last 90 Days",
+        label: __("Last 90 Days"),
         onClick: () => {
-          preset.value = "Last 90 Days";
+          preset.value = __("Last 90 Days");
           filters.period = getLastXDays(90);
         },
       },
     ],
   },
   {
-    label: "Custom Range",
+    label: __("Custom Range"),
     onClick: () => {
       showDatePicker.value = true;
       setTimeout(() => {
         datePickerRef.value?.open();
       }, 0);
-      preset.value = "Custom Range";
+      preset.value = __("Custom Range");
       filters.period = null; // Reset period to allow custom date selection
     },
   },
@@ -318,11 +320,11 @@ const options = computed(() => [
 function formatter(range: string) {
   if (!range) {
     filters.period = getLastXDays();
-    preset.value = "Last 30 Days";
+    preset.value = __("Last 30 Days");
     return preset.value;
   }
   let [from, to] = range.split(",");
-  return `${formatRange(from)} to ${formatRange(to)}`;
+  return `${formatRange(from)} ${__("to")} ${formatRange(to)}`;
 }
 
 function formatRange(date: string) {
@@ -391,7 +393,7 @@ onMounted(() => {
 
 usePageMeta(() => {
   return {
-    title: "Dashboard",
+    title: __("Dashboard"),
   };
 });
 </script>