Merge pull request #33 from Ketbome/fix/language-fallback-and-german

Fix/language fallback and german

Author: Ketbome

config.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Minecraft Docker Manager - Control panel for managing Minecraft servers via Docker",
   "author": "ketbome",
   "license": "MIT"

frontend/src/components/ui/language-switcher.tsx

@@ -26,6 +26,9 @@ export function LanguageSwitcher() {
         <DropdownMenuItem onClick={() => setLanguage("nl")} className={`flex items-center gap-2 px-3 py-2 rounded font-minecraft text-sm transition-colors ${language === "nl" ? "bg-emerald-700/80 text-white" : "hover:bg-emerald-800/60 hover:text-emerald-200 text-emerald-300"}`}>
           <span>🇳🇱</span> {t("dutch")}
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setLanguage("de")} className={`flex items-center gap-2 px-3 py-2 rounded font-minecraft text-sm transition-colors ${language === "de" ? "bg-emerald-700/80 text-white" : "hover:bg-emerald-800/60 hover:text-emerald-200 text-emerald-300"}`}>
+          <span>🇩🇪</span> {t("german")}
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

frontend/src/lib/hooks/useLanguage.tsx

@@ -13,7 +13,14 @@ interface LanguageContextType {
 const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
 
 export function LanguageProvider({ children }: { children: ReactNode }) {
-  const defaultLanguage = (env("NEXT_PUBLIC_DEFAULT_LANGUAGE") as Language) || "en";
+  const envLang = env("NEXT_PUBLIC_DEFAULT_LANGUAGE");
+  const isValidLang = envLang && envLang in translations;
+
+  if (envLang && !isValidLang) {
+    console.warn(`[Minepanel] Language "${envLang}" is not available. Available: ${Object.keys(translations).join(", ")}. Falling back to "en".`);
+  }
+
+  const defaultLanguage = isValidLang ? (envLang as Language) : "en";
   const [language, setLanguageState] = useState<Language>(defaultLanguage);
 
   useEffect(() => {
@@ -29,15 +36,15 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
     localStorage.setItem("language", lang);
   }, []);
 
-  const t = useCallback((key: TranslationKey): string => {
-    return translations[language][key] || key;
-  }, [language]);
-
-  const value = useMemo(
-    () => ({ language, setLanguage, t }),
-    [language, setLanguage, t]
+  const t = useCallback(
+    (key: TranslationKey): string => {
+      return translations[language][key] || key;
+    },
+    [language]
   );
 
+  const value = useMemo(() => ({ language, setLanguage, t }), [language, setLanguage, t]);
+
   return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
 }