Restore language switcher integration

wata-board-frontend/src/components/LanguageSwitcher.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { supportedLanguages, getCurrentLanguage, changeLanguage, isRTL } from '../i18n';
+import { supportedLanguages, changeLanguage, isRTL } from '../i18n';
 
 interface LanguageSwitcherProps {
   className?: string;
@@ -18,7 +18,7 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   const { i18n } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const currentLang = getCurrentLanguage();
+  const currentLang = supportedLanguages.find((lang) => lang.code === i18n.language) || supportedLanguages[0];
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -34,6 +34,20 @@ export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
     };
   }, []);
 
+  // Close dropdown on Escape key
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
   // Handle language change
   const handleLanguageChange = async (languageCode: string) => {
     const success = await changeLanguage(languageCode);

wata-board-frontend/src/components/ResponsiveNavigation.tsx

@@ -145,11 +145,15 @@ export const ResponsiveNavigation: React.FC = () => {
                   Rate Us
                 </Link>
               </div>
-              <NetworkSwitcher showLabel={false} />
+              <div className="flex items-center gap-2">
+                <LanguageSwitcher showNativeName={false} />
+                <NetworkSwitcher showLabel={false} />
+              </div>
             </div>
 
             {/* Mobile menu button */}
             <div className="lg:hidden flex items-center gap-3">
+              <LanguageSwitcher variant="compact" showNativeName={false} />
               <NetworkSwitcher showLabel={false} />
               <button
                 ref={menuButtonRef}

wata-board-frontend/src/i18n/index.ts

@@ -137,6 +137,16 @@ export const isRTL = (languageCode?: string) => {
   return getTextDirection(langCode) === 'rtl';
 };
 
+// Ensure initial document direction and language are set for detected locale
+const initializeDocumentLanguage = () => {
+  const currentLangInfo = supportedLanguages.find((lang) => lang.code === i18n.language) || supportedLanguages[0];
+  document.documentElement.lang = currentLangInfo.code;
+  document.documentElement.dir = currentLangInfo.dir;
+};
+
+initializeDocumentLanguage();
+i18n.on('languageChanged', initializeDocumentLanguage);
+
 // Helper function to format numbers with locale
 export const formatNumber = (number: number, options?: Intl.NumberFormatOptions) => {
   const locale = i18n.language === 'zh' ? 'zh-CN' : i18n.language;