RCE fix

app/components/LanguageToggle.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Link } from '../../i18n/routing';
+import { GlobeAltIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+type Locale = 'en' | 'de' | 'ru' | 'ka' | 'ar';
+
+interface LanguageOption {
+  code: Locale;
+  name: string;
+}
+
+export function LanguageToggle() {
+  const locale = useLocale() as Locale;
+  const t = useTranslations('ui');
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Define the available locales
+  const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
+
+  const languageOptions: LanguageOption[] = locales.map((code) => ({
+    code,
+    name: t(`languages.${code}`)
+  }));
+
+  const currentLanguage = languageOptions.find(lang => lang.code === locale) || languageOptions[0];
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close dropdown
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Main toggle button */}
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
+        aria-label={t('languageSelector')}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <GlobeAltIcon className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+        <span className="text-sm text-gray-700 dark:text-gray-300 min-w-[60px] text-left hidden min-[360px]:block">
+          {currentLanguage.name}
+        </span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+          <div className="py-1">
+            {languageOptions.map((option) => (
+              <Link
+                key={option.code}
+                href="/"
+                locale={option.code}
+                onClick={() => setIsOpen(false)}
+                className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+                  locale === option.code
+                    ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                }`}
+                role="menuitem"
+              >
+                <GlobeAltIcon className={`w-4 h-4 ${
+                  locale === option.code ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'
+                }`} />
+                <span>{option.name}</span>
+                {locale === option.code && (
+                  <div className="ml-auto w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                )}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/SkinSelector.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+import { appConfig } from '../config/app';
+import { SkinId } from '../types';
+import { useLocalizedSkinName } from '../hooks/useLocalizedSkinName';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+
+interface SkinOption {
+  id: SkinId;
+  name: string;
+  image: string;
+}
+
+export function SkinSelector() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const getLocalizedSkinName = useLocalizedSkinName();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const skinOptions: SkinOption[] = Object.entries(appConfig.skins).map(([id, skin]) => ({
+    id: id as SkinId,
+    name: getLocalizedSkinName(id),
+    image: skin.normal
+  }));
+
+  const skinParam = searchParams.get('skin');
+  
+  // Validate that the skin exists in our config
+  const isValidSkin = skinParam && Object.keys(appConfig.skins).includes(skinParam);
+  
+  // Use the skin from URL if valid, otherwise use default skin
+  const currentSkin = (isValidSkin ? skinParam : appConfig.defaultSkin) as SkinId;
+  const currentSkinOption = skinOptions.find(skin => skin.id === currentSkin) || skinOptions[0];
+
+  const handleSkinChange = useCallback((newSkin: SkinId) => {
+    const params = new URLSearchParams(searchParams.toString());
+    
+    if (newSkin === appConfig.defaultSkin) {
+      params.delete('skin');
+    } else {
+      params.set('skin', newSkin);
+    }
+
+    const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
+    router.push(newUrl);
+    setIsOpen(false);
+  }, [router, searchParams]);
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close dropdown
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Main toggle button */}
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
+        aria-label="Skin selector"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Image
+          src={currentSkinOption.image}
+          alt={currentSkinOption.name}
+          width={16}
+          height={16}
+          className="rounded"
+        />
+        <span className="text-sm text-gray-700 dark:text-gray-300 min-w-[60px] text-left hidden min-[360px]:block">
+          {currentSkinOption.name}
+        </span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+          <div className="py-1">
+            {skinOptions.map((option) => (
+              <button
+                key={option.id}
+                onClick={() => handleSkinChange(option.id)}
+                className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+                  currentSkin === option.id
+                    ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                }`}
+                role="menuitem"
+              >
+                <Image
+                  src={option.image}
+                  alt={option.name}
+                  width={16}
+                  height={16}
+                  className="rounded"
+                />
+                <span>{option.name}</span>
+                {currentSkin === option.id && (
+                  <div className="ml-auto w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/SpeechBubble.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { frogMessages } from '../config/messages';
+import { useMessages } from 'next-intl';
+import { getRandomEmoji } from '../config/emojis';
 
 // Increase visibility duration for speech bubbles
 const VISIBILITY_MS = 3000; // 3 seconds for message visibility
@@ -14,18 +15,51 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   const [message, setMessage] = useState('');
   const [isVisible, setIsVisible] = useState(false);
   const [messageQueue, setMessageQueue] = useState<string[]>([]);
+  const allMessages = useMessages();
+  const messagesRef = useRef<string[]>([]);
   const lastTriggerTime = useRef(0);
   const showTimeRef = useRef<number>(0);
   const lastFadeTime = useRef(0);
   
+  // Load messages when component mounts or language changes
+  useEffect(() => {
+    // Only run if we haven't loaded messages yet
+    if (messagesRef.current.length > 0) return;
+    
+    // Get the character messages from the messages object
+    try {
+      const characterMessages = allMessages.character;
+      
+      if (characterMessages && typeof characterMessages === 'object') {
+        // Convert object values to array
+        const messageArray = Object.values(characterMessages) as string[];
+        
+        if (messageArray.length === 0) {
+          console.error(`No character messages found! Expected messages in 'character' namespace but got none.`);
+          return;
+        }
+        
+        console.log(`Loaded ${messageArray.length} character messages`);
+        messagesRef.current = messageArray;
+      } else {
+        console.error(`Character messages not found or invalid format:`, characterMessages);
+      }
+    } catch (error) {
+      console.error(`Error loading character messages:`, error);
+    }
+  }, [allMessages]); // Depend on allMessages to reload when they change
+
   const getRandomMessage = useCallback(() => {
-    const randomIndex = Math.floor(Math.random() * frogMessages.length);
-    return frogMessages[randomIndex];
-  }, []);
+    const currentMessages = messagesRef.current;
+    if (currentMessages.length === 0) return '';
+    const randomIndex = Math.floor(Math.random() * currentMessages.length);
+    const message = currentMessages[randomIndex];
+    return `${message} ${getRandomEmoji()}`;
+  }, []); // No dependencies needed since we use ref
 
   // Handle new trigger events
   useEffect(() => {
-    if (triggerCount === 0) return;
+    if (triggerCount === 0 || messagesRef.current.length === 0) return;
     
     const now = Date.now();
     const timeSinceLastFade = now - lastFadeTime.current;
@@ -33,7 +67,9 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
     // If we're in cooldown, or a message is visible, queue the new message
     if (timeSinceLastFade < COOLDOWN_MS || isVisible) {
       const newMessage = getRandomMessage();
-      setMessageQueue(prev => [...prev, newMessage]);
+      if (newMessage) {
+        setMessageQueue(prev => [...prev, newMessage]);
+      }
       return;
     }
 
@@ -41,9 +77,11 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
     lastTriggerTime.current = now;
     showTimeRef.current = now;
     const newMessage = getRandomMessage();
-    setMessage(newMessage);
-    setIsVisible(true);
-  }, [triggerCount, getRandomMessage, isVisible]);
+    if (newMessage) {
+      setMessage(newMessage);
+      setIsVisible(true);
+    }
+  }, [triggerCount, isVisible, getRandomMessage]);
 
   // Handle message queue
   useEffect(() => {
@@ -76,19 +114,16 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   }, [isVisible]);
 
   return (
-    <div 
-      className={`absolute -top-24 left-1/2 -translate-x-1/2 bg-white dark:bg-slate-800 
+    <div
+      className={`absolute -top-24 bg-white dark:bg-slate-800
                   px-4 py-2 rounded-xl shadow-lg z-20 transition-opacity duration-300
                   ${isVisible ? 'opacity-100 animate-float' : 'opacity-0 pointer-events-none'}`}
+      style={{
+        left: '50%',
+        transform: 'translateX(-50%)'
+      }}
     >
-      <div className="relative">
-        {message}
-        <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-0 h-0 
-                      border-l-[8px] border-l-transparent
-                      border-r-[8px] border-r-transparent
-                      border-t-[8px] border-t-white
-                      dark:border-t-slate-800" />
-      </div>
+      {message}
     </div>
   );
 }

app/components/ThemeToggle.tsx

@@ -1,22 +1,138 @@
 'use client';
 
+import { useState, useRef, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { useTheme } from '../providers/ThemeProvider';
-import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+import { SunIcon, MoonIcon, ComputerDesktopIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeOption {
+  mode: ThemeMode;
+  label: string;
+  icon: React.ReactNode;
+}
 
 export function ThemeToggle() {
-  const { darkMode, toggleDarkMode } = useTheme();
+  const { themeMode, setThemeMode } = useTheme();
+  const t = useTranslations('ui');
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const themeOptions: ThemeOption[] = [
+    {
+      mode: 'light',
+      label: t('themes.light'),
+      icon: <SunIcon className="w-4 h-4" />
+    },
+    {
+      mode: 'dark',
+      label: t('themes.dark'),
+      icon: <MoonIcon className="w-4 h-4" />
+    },
+    {
+      mode: 'system',
+      label: t('themes.system'),
+      icon: <ComputerDesktopIcon className="w-4 h-4" />
+    }
+  ];
+
+  // Get current theme option
+  const currentTheme = themeOptions.find(option => option.mode === themeMode) || themeOptions[2];
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close dropdown
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const handleThemeSelect = (mode: ThemeMode) => {
+    setThemeMode(mode);
+    setIsOpen(false);
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
-    <button
-      onClick={toggleDarkMode}
-      className="fixed top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors z-50"
-      aria-label="Toggle dark mode"
-    >
-      {darkMode ? (
-        <SunIcon className="w-6 h-6 text-yellow-500" />
-      ) : (
-        <MoonIcon className="w-6 h-6 text-gray-900" />
+    <div className="relative" ref={dropdownRef}>
+      {/* Main toggle button */}
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors z-50"
+        aria-label={t('themeSelector')}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <div className="flex items-center text-gray-700 dark:text-gray-300">
+          {currentTheme.icon}
+        </div>
+        <span className="text-sm text-gray-700 dark:text-gray-300 min-w-[60px] text-left hidden min-[360px]:block">
+          {currentTheme.label}
+        </span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+          <div className="py-1">
+            {themeOptions.map((option) => (
+              <button
+                key={option.mode}
+                onClick={() => handleThemeSelect(option.mode)}
+                className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+                  themeMode === option.mode
+                    ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                }`}
+                role="menuitem"
+              >
+                <div className={themeMode === option.mode ? 'text-blue-600 dark:text-blue-400' : ''}>
+                  {option.icon}
+                </div>
+                <span>{option.label}</span>
+                {themeMode === option.mode && (
+                  <div className="ml-auto w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
       )}
-    </button>
+    </div>
   );
 }