refactor: improve translation in Document Viewer

Author: HouariZegai

src/components/DocumentViewer.tsx

@@ -1,39 +1,36 @@
-import { useState, useRef, useEffect } from "react";
-import { useIsMobile } from "@/hooks/use-mobile";
-import { Button } from "@/components/ui/button";
-import {
-  ChevronRight,
-  ChevronLeft,
-  SkipBack,
-  SkipForward,
-} from "lucide-react";
-import PageViewer from "./PageViewer";
+import { useEffect, useRef, useState } from 'react';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight, SkipBack, SkipForward } from 'lucide-react';
+import PageViewer from './PageViewer';
 import { useLanguage } from '@/contexts/LanguageContext';
 
 interface DocumentViewerProps {
   className?: string;
 }
 
 export default function DocumentViewer({ className }: DocumentViewerProps) {
-  const {t} = useLanguage();
+  const { t, isRTL, currentLanguage } = useLanguage();
   const isMobile = useIsMobile();
   const totalPages = 604; // Total number of pages in the document
   const [currentPage, setCurrentPage] = useState<number>(1);
 
-  // ==== Improved "انتقال" Section state ====
-  const [gotoPage, setGotoPage] = useState<string>("1");
+  // Navigation state
+  const [gotoPage, setGotoPage] = useState<string>('1');
   const [gotoError, setGotoError] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // ---- Pagination logic ----
+  // Calculate page increment based on view and RTL
   const pageIncrement = isMobile ? 1 : 2;
 
+  // Adjust page number when switching between mobile/desktop
   useEffect(() => {
     if (!isMobile && currentPage % 2 === 0) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [isMobile, currentPage]);
 
+  // Navigation handlers with RTL consideration
   const goToNextPages = () => {
     setCurrentPage((prev) => Math.min(totalPages, prev + pageIncrement));
   };
@@ -47,20 +44,14 @@ export default function DocumentViewer({ className }: DocumentViewerProps) {
   };
 
   const goToLastPage = () => {
-    setCurrentPage(
-      isMobile
-        ? totalPages
-        : totalPages % 2 === 0
-        ? totalPages - 1
-        : totalPages
-    );
+    const lastPage = isMobile ? totalPages : totalPages % 2 === 0 ? totalPages - 1 : totalPages;
+    setCurrentPage(lastPage);
   };
 
-  // ==== Improved Go To Page Logic ====
   const handleGoto = () => {
     const page = parseInt(gotoPage, 10);
     if (isNaN(page) || page < 1 || page > totalPages) {
-      setGotoError(`رقم الصفحة يجب أن يكون بين 1 و ${totalPages}`);
+      setGotoError(t('pageNumberError', { min: 1, max: totalPages }));
       inputRef.current?.focus();
     } else {
       setCurrentPage(page);
@@ -70,142 +61,160 @@ export default function DocumentViewer({ className }: DocumentViewerProps) {
     }
   };
 
-  // Allow Enter key to trigger transition
   const handleGotoInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       e.preventDefault();
       handleGoto();
     }
   };
 
-  // Keep goto field in sync if user changes page elsewhere
   useEffect(() => {
     setGotoPage(String(currentPage));
     setGotoError(null);
   }, [currentPage]);
 
+  const getPageDisplay = () => {
+    if (isMobile) {
+      return [
+        <PageViewer
+          key={currentPage}
+          pageNumber={currentPage}
+          totalPages={totalPages}
+          className="animate-fadeIn aspect-[3/4] w-full max-w-md"
+        />
+      ];
+    }
+
+    return [
+      <PageViewer
+        key={currentPage + 1}
+        pageNumber={currentPage + 1}
+        totalPages={totalPages}
+        className="animate-slideInRight aspect-[3/4] w-1/2 max-w-md"
+      />,
+      <PageViewer
+        key={currentPage}
+        pageNumber={currentPage}
+        totalPages={totalPages}
+        className="animate-slideInLeft aspect-[3/4] w-1/2 max-w-md"
+      />
+    ];
+  };
+
+  const getNavigationIcons = () => {
+    return isRTL ? {
+      first: <SkipForward className="h-4 w-4" />,
+      previous: <ChevronRight className="h-4 w-4" />,
+      next: <ChevronLeft className="h-4 w-4" />,
+      last: <SkipBack className="h-4 w-4" />
+    } : {
+      first: <SkipBack className="h-4 w-4" />,
+      previous: <ChevronLeft className="h-4 w-4" />,
+      next: <ChevronRight className="h-4 w-4" />,
+      last: <SkipForward className="h-4 w-4" />
+    };
+  };
+
+  const icons = getNavigationIcons();
+
   return (
-    <div className={className}>
+    <div className={className} dir={isRTL ? 'rtl' : 'ltr'}>
       <div className="flex flex-col items-center space-y-8">
         {/* Pages container */}
-        <div className="w-full flex flex-row-reverse items-center justify-center gap-1 md:gap-2 lg:gap-3">
-          {isMobile ? (
-            // Mobile view - one page
-            <PageViewer
-              pageNumber={currentPage}
-              totalPages={totalPages}
-              className="w-full aspect-[3/4] max-w-md animate-fadeIn"
-            />
-          ) : (
-            // Desktop/tablet view - two pages
-            <>
-              {/* Left page (even) */}
-              <PageViewer
-                pageNumber={currentPage + 1}
-                totalPages={totalPages}
-                className="w-1/2 aspect-[3/4] max-w-md animate-slideInLeft"
-              />
-
-              {/* Right page (odd) */}
-              <PageViewer
-                pageNumber={currentPage}
-                totalPages={totalPages}
-                className="w-1/2 aspect-[3/4] max-w-md animate-slideInRight"
-              />
-            </>
-          )}
+        <div className={`flex w-full items-center justify-center gap-1 md:gap-2 lg:gap-3 ${isRTL ? 'flex-row-reverse' : 'flex-row'}`}>
+          {getPageDisplay()}
         </div>
 
         {/* Navigation controls */}
-        <div className="flex items-center justify-center space-x-2 rtl:space-x-reverse">
+        <div className="flex items-center justify-center gap-2">
           <Button
             variant="outline"
             size="icon"
             onClick={goToFirstPage}
             disabled={currentPage === 1}
-            title="الصفحة الأولى"
+            title={t('firstPage')}
+            aria-label={t('firstPage')}
           >
-            <SkipForward className="h-4 w-4" />
+            {icons.first}
           </Button>
 
           <Button
             variant="outline"
             size="icon"
             onClick={goToPreviousPages}
             disabled={currentPage === 1}
-            title="الصفحة السابقة"
+            title={t('previousPage')}
+            aria-label={t('previousPage')}
           >
-            <ChevronRight className="h-4 w-4" />
+            {icons.previous}
           </Button>
 
           <div className="mx-4 text-sm font-medium">
-            <span>{currentPage}</span>
+            <span>{currentPage.toLocaleString(currentLanguage)}</span>
             {!isMobile && currentPage + 1 <= totalPages && (
               <>
                 <span className="mx-1">-</span>
-                <span>{currentPage + 1}</span>
+                <span>{(currentPage + 1).toLocaleString(currentLanguage)}</span>
               </>
             )}
-            <span className="mx-1 text-muted-foreground">من</span>
-            <span>{totalPages}</span>
+            <span className="mx-1 text-muted-foreground">{t('of')}</span>
+            <span>{totalPages.toLocaleString(currentLanguage)}</span>
           </div>
 
           <Button
             variant="outline"
             size="icon"
             onClick={goToNextPages}
-            disabled={
-              isMobile
-                ? currentPage === totalPages
-                : currentPage + 1 >= totalPages
-            }
-            title="الصفحة التالية"
+            disabled={isMobile ? currentPage === totalPages : currentPage + 1 >= totalPages}
+            title={t('nextPage')}
+            aria-label={t('nextPage')}
           >
-            <ChevronLeft className="h-4 w-4" />
+            {icons.next}
           </Button>
 
           <Button
             variant="outline"
             size="icon"
             onClick={goToLastPage}
-            disabled={
-              isMobile
-                ? currentPage === totalPages
-                : currentPage + 1 >= totalPages
-            }
-            title="الصفحة الأخيرة"
+            disabled={isMobile ? currentPage === totalPages : currentPage + 1 >= totalPages}
+            title={t('lastPage')}
+            aria-label={t('lastPage')}
           >
-            <SkipBack className="h-4 w-4" />
+            {icons.last}
           </Button>
         </div>
 
-        {/* Improved Page number input */}
+        {/* Page number input */}
         <div className="flex flex-col items-center gap-1">
-          <label htmlFor="goto-input" className="text-right w-full text-xs md:text-sm font-bold mb-1 text-muted-foreground">
+          <label
+            htmlFor="goto-input"
+            className="mb-1 w-full text-xs font-bold text-muted-foreground md:text-sm"
+            style={{ textAlign: isRTL ? 'right' : 'left' }}
+          >
             {t('goToPage')}
           </label>
-          <div className="flex items-center space-x-2 rtl:space-x-reverse">
+          <div className="flex items-center gap-2">
             <input
               id="goto-input"
               ref={inputRef}
               type="number"
               min={1}
               max={totalPages}
               value={gotoPage}
-              onChange={(e) => setGotoPage(e.target.value.replace(/\D/, ""))}
+              onChange={(e) => setGotoPage(e.target.value.replace(/\D/, ''))}
               onKeyDown={handleGotoInputKeyDown}
-              className={`w-20 md:w-28 h-10 px-2 border rounded text-center focus:ring-2 focus:ring-primary transition-all`}
-              aria-label="رقم الصفحة"
+              className={`h-10 w-20 rounded border px-2 text-center transition-all focus:ring-2 focus:ring-primary md:w-28 ${
+                isRTL ? 'text-right' : 'text-left'
+              }`}
+              aria-label={t('pageNumber')}
+              dir="ltr" // Always LTR for numbers
             />
-            <Button
-              variant="secondary"
-              onClick={handleGoto}
-            >
+            <Button variant="secondary" onClick={handleGoto}>
               {t('goTo')}
             </Button>
           </div>
           {gotoError && (
-            <div className="mt-2 text-xs text-red-500 animate-fadeIn" role="alert">
+            <div className="animate-fadeIn mt-2 text-xs text-red-500" role="alert">
               {gotoError}
             </div>
           )}

src/contexts/LanguageContext/languageConfig.ts

@@ -15,14 +15,20 @@ export type Language = keyof typeof SUPPORTED_LANGUAGES;
 export const translations = {
   ar: {
     siteName: 'القرأن الكريم',
-    siteSlogan: 'تصفح الآيات، وامنح قلبك يقينًا لا يزول',
+    siteSlogan: 'نور للعقل، يقين للقلب',
     toggleLanguage: 'English',
     error: 'حدث خطأ في تحميل البيانات',
     pageNotFound: 'عذرًا! الصفحة غير موجودة',
     backHome: 'العودة إلى الصفحة الرئيسية',
     copyright: 'يقين للقرأن الكريم. جميع الحقوق محفوظة.',
     goToPage: 'اذهب إلى صفحة معينة',
     goTo: 'إنتقال',
+    firstPage: 'الصفحة الأولى',
+    previousPage: 'الصفحة السابقة',
+    nextPage: 'الصفحة التالية',
+    of: 'من',
+    pageNumber: 'رقم الصفحة',
+    pageNumberError: 'رقم الصفحة غير صحيح',
   },
   en: {
     siteName: 'Holy Quran',
@@ -34,6 +40,12 @@ export const translations = {
     copyright: 'Yaqiin Quran. All rights reserved.',
     goToPage: 'Go To Page',
     goTo: 'Go To',
+    firstPage: 'First Page',
+    previousPage: 'Previous Page',
+    nextPage: 'Next Page',
+    of: 'of',
+    pageNumber: 'Page Number',
+    pageNumberError: 'Invalid page number',
   }
 };