RCE fix

app/hooks/useDarkMode.ts

@@ -1,34 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-
-export function useDarkMode() {
-  const [darkMode, setDarkMode] = useState(false);
-
-  useEffect(() => {
-    // Check if user has a dark mode preference in localStorage
-    const isDark = localStorage.getItem('darkMode') === 'true';
-    // Check system preference if no localStorage value
-    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
-    setDarkMode(isDark ?? systemPrefersDark);
-
-    // Add listener for system theme changes
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = (e: MediaQueryListEvent) => {
-      if (localStorage.getItem('darkMode') === null) {
-        setDarkMode(e.matches);
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
-  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-    localStorage.setItem('darkMode', (!darkMode).toString());
-  };
-
-  return { darkMode, toggleDarkMode };
-}

app/hooks/useLocalizedSkinName.ts

@@ -0,0 +1,27 @@
+'use client';
+
+import { useLocale } from 'next-intl';
+import { getLocalizedSkinName } from '../config/skin-names';
+import { type Locale } from '../../i18n/request';
+
+// Define grammatical cases
+type GrammaticalCase = 'nominative' | 'accusative' | 'dative' | 'genitive' | 'instrumental' | 'prepositional';
+
+/**
+ * Hook to get localized skin names
+ */
+export function useLocalizedSkinName() {
+  const locale = useLocale();
+  
+  /**
+   * Get a localized skin name with the appropriate grammatical case
+   * @param skinId The skin ID
+   * @param grammaticalCase The grammatical case to use (for languages that need it)
+   * @returns The localized skin name
+   */
+  const getLocalizedName = (skinId: string, grammaticalCase: GrammaticalCase = 'nominative'): string => {
+    return getLocalizedSkinName(skinId, locale as Locale, grammaticalCase);
+  };
+  
+  return getLocalizedName;
+}

app/hooks/useSkin.ts

@@ -0,0 +1,18 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { appConfig } from '../config/app';
+import { SkinId } from '../types';
+
+export function useSkin() {
+  const searchParams = useSearchParams();
+  const skinParam = searchParams.get('skin');
+  
+  // Validate that the skin exists in our config
+  const isValidSkin = skinParam && Object.keys(appConfig.skins).includes(skinParam);
+  
+  // Return the skin from URL if valid, otherwise return default skin
+  const currentSkin = (isValidSkin ? skinParam : appConfig.defaultSkin) as SkinId;
+  
+  return currentSkin;
+}