feat: add translate

src/components/LeftSidebar.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Upload, LogIn, LogOut, FileText, Clock, ChevronLeft, ChevronRight, Settings, History, MousePointerClick, FileUp, ClipboardPaste, Loader2 } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
+import { useLanguage } from '../contexts/LanguageContext';
 import { FileRecord } from '../types';
 import AuthModal from './AuthModal';
 
@@ -30,11 +31,13 @@ export default function LeftSidebar({
   onLoadMore,
 }: LeftSidebarProps) {
   const { user, signOut } = useAuth();
+  const { t } = useLanguage();
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
+  // ... (rest of the logic remains the same)
   // Handle scroll to load more
   const handleScroll = useCallback(() => {
     if (!listRef.current || loadingMore || !hasMore) return;
@@ -116,13 +119,13 @@ export default function LeftSidebar({
         <button
           onClick={onUploadClick}
           className="p-3 rounded-xl bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-600/20 transition-all mb-6"
-          title="Upload"
+          title={t.common.upload}
         >
           <Upload size={20} />
         </button>
 
         <div className="flex-1 w-full flex flex-col items-center gap-4">
-          <button className="p-2 text-gray-400 hover:text-gray-900 transition-colors" title="History">
+          <button className="p-2 text-gray-400 hover:text-gray-900 transition-colors" title={t.common.history}>
             <History size={20} />
           </button>
         </div>
@@ -130,7 +133,7 @@ export default function LeftSidebar({
         <button
           onClick={() => !user && setShowAuthModal(true)}
           className="p-3 rounded-lg text-gray-600 hover:bg-gray-200 transition-colors mt-auto"
-          title={user ? 'Signed In' : 'Sign In'}
+          title={user ? 'Signed In' : t.common.login}
         >
           <LogIn size={20} />
         </button>
@@ -145,8 +148,8 @@ export default function LeftSidebar({
         <div className="p-6 pb-4">
           <div className="flex items-start justify-between mb-6">
             <div>
-              <h2 className="text-lg font-bold text-gray-900 leading-tight">Formula Recognize</h2>
-              <p className="text-xs text-gray-500 mt-1">Support handwriting and printed formulas</p>
+              <h2 className="text-lg font-bold text-gray-900 leading-tight">{t.sidebar.title}</h2>
+              <p className="text-xs text-gray-500 mt-1">{t.sidebar.subtitle}</p>
             </div>
             <button
               onClick={onToggleCollapse}
@@ -156,7 +159,7 @@ export default function LeftSidebar({
             </button>
           </div>
 
-          <div className="mb-2">
+          <div className="mb-2" id="sidebar-upload-area">
             <div
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
@@ -181,18 +184,19 @@ export default function LeftSidebar({
               <div className="w-12 h-12 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
                 <Upload size={24} />
               </div>
-              <div className="flex items-center justify-center gap-4 mt-2 text-xs text-gray-400">
+              <p className="text-xs text-gray-500 mb-2">{t.sidebar.uploadInstruction}</p>
+              <div className="flex items-center justify-center gap-4 text-xs text-gray-400">
                 <div className="flex items-center gap-1">
                   <MousePointerClick className="w-3.5 h-3.5" />
-                  <span>Click</span>
+                  <span>{t.common.click}</span>
                 </div>
                 <div className="flex items-center gap-1">
                   <FileUp className="w-3.5 h-3.5" />
-                  <span>Drop</span>
+                  <span>{t.common.drop}</span>
                 </div>
                 <div className="flex items-center gap-1">
                   <ClipboardPaste className="w-3.5 h-3.5" />
-                  <span>Paste</span>
+                  <span>{t.common.paste}</span>
                 </div>
               </div>
             </div>
@@ -200,10 +204,10 @@ export default function LeftSidebar({
         </div>
 
         {/* Middle Area: History */}
-        <div className="flex-1 overflow-hidden flex flex-col px-4">
+        <div className="flex-1 overflow-hidden flex flex-col px-4" id="sidebar-history">
           <div className="flex items-center gap-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-2">
             <Clock size={14} />
-            <span>History</span>
+            <span>{t.sidebar.historyHeader}</span>
           </div>
 
           <div
@@ -214,12 +218,12 @@ export default function LeftSidebar({
             {!user ? (
               <div className="text-center py-12 text-gray-400 text-sm">
                 <div className="mb-2 opacity-50"><FileText size={40} className="mx-auto" /></div>
-                Please login to view history
+                {t.sidebar.pleaseLogin}
               </div>
             ) : files.length === 0 ? (
               <div className="text-center py-12 text-gray-400 text-sm">
                 <div className="mb-2 opacity-50"><FileText size={40} className="mx-auto" /></div>
-                No history records
+                {t.sidebar.noHistory}
               </div>
             ) : (
               <>
@@ -256,13 +260,13 @@ export default function LeftSidebar({
                 {loadingMore && (
                   <div className="flex items-center justify-center py-3 text-gray-400">
                     <Loader2 size={18} className="animate-spin" />
-                    <span className="ml-2 text-xs">Loading...</span>
+                    <span className="ml-2 text-xs">{t.common.loading}</span>
                   </div>
                 )}
                 {/* End of list indicator */}
                 {!hasMore && files.length > 0 && (
                   <div className="text-center py-3 text-xs text-gray-400">
-                    No more records
+                    {t.sidebar.noMore}
                   </div>
                 )}
               </>
@@ -285,7 +289,7 @@ export default function LeftSidebar({
               <button
                 onClick={() => signOut()}
                 className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
-                title="Logout"
+                title={t.common.logout}
               >
                 <LogOut size={16} />
               </button>
@@ -296,7 +300,7 @@ export default function LeftSidebar({
               className="w-full py-2.5 px-4 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors flex items-center justify-center gap-2 text-sm font-medium shadow-lg shadow-gray-900/10"
             >
               <LogIn size={18} />
-              Login / Register
+              {t.common.login}
             </button>
           )}
         </div>