Fix Settings: add i18n translations for image generation, model dropdown

- Add imageGeneration/imageProvider/imageModel/imageApiKey translations (de/en/es)
- Replace text input with model dropdown (DALL-E 2/3, Gemini Imagen, SD3 variants)
- Remove hardcoded German fallbacks, use proper t() keys

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: JiroMusik

src/i18n/locales/de.json

@@ -272,7 +272,13 @@
     "themeCustom": "Eigenes",
     "uploadCss": "CSS-Datei hochladen",
     "customCssLoaded": "CSS geladen",
-    "customCssActive": "Eigenes CSS aktiv ({{size}} Zeichen)"
+    "customCssActive": "Eigenes CSS aktiv ({{size}} Zeichen)",
+    "imageGeneration": "Bildgenerierung",
+    "imageProvider": "Bild-Anbieter",
+    "imageModel": "Bild-Modell",
+    "imageModelHint": "Leer lassen für Standardmodell",
+    "imageApiKey": "Bild API-Schlüssel",
+    "imageApiKeyPlaceholder": "API Key für {{provider}}"
   },
   "shopping": {
     "title": "Einkaufsliste",

src/i18n/locales/en.json

@@ -267,7 +267,13 @@
     "themeCustom": "Custom",
     "uploadCss": "Upload CSS file",
     "customCssLoaded": "CSS loaded",
-    "customCssActive": "Custom CSS active ({{size}} characters)"
+    "customCssActive": "Custom CSS active ({{size}} characters)",
+    "imageGeneration": "Image Generation",
+    "imageProvider": "Image Provider",
+    "imageModel": "Image Model",
+    "imageModelHint": "Leave empty for default model",
+    "imageApiKey": "Image API Key",
+    "imageApiKeyPlaceholder": "API Key for {{provider}}"
   },
   "shopping": {
     "title": "Shopping List",

src/i18n/locales/es.json

@@ -267,7 +267,13 @@
     "themeCustom": "Personalizado",
     "uploadCss": "Subir archivo CSS",
     "customCssLoaded": "CSS cargado",
-    "customCssActive": "CSS personalizado activo ({{size}} caracteres)"
+    "customCssActive": "CSS personalizado activo ({{size}} caracteres)",
+    "imageGeneration": "Generación de imágenes",
+    "imageProvider": "Proveedor de imágenes",
+    "imageModel": "Modelo de imagen",
+    "imageModelHint": "Dejar vacío para modelo predeterminado",
+    "imageApiKey": "Clave API de imagen",
+    "imageApiKeyPlaceholder": "Clave API para {{provider}}"
   },
   "shopping": {
     "title": "Lista de compras",

src/pages/Settings.tsx

@@ -14,9 +14,9 @@ const INITIAL_PROVIDERS = [
 ];
 
 const IMAGE_PROVIDERS = [
-  { id: 'openai', name: 'OpenAI (DALL-E)', defaultModel: 'dall-e-3' },
-  { id: 'gemini', name: 'Gemini Imagen', defaultModel: 'gemini-2.0-flash-preview-image-generation' },
-  { id: 'stability', name: 'Stability AI', defaultModel: 'sd3.5-large' },
+  { id: 'openai', name: 'OpenAI (DALL-E)', models: ['dall-e-3', 'dall-e-2'] },
+  { id: 'gemini', name: 'Gemini Imagen', models: ['gemini-2.0-flash-preview-image-generation', 'imagen-3.0-generate-002'] },
+  { id: 'stability', name: 'Stability AI', models: ['sd3.5-large', 'sd3.5-medium', 'sd3-large'] },
 ];
 
 export default function Settings() {
@@ -339,13 +339,13 @@ export default function Settings() {
             <span className="bg-amber-100 text-amber-600 p-2 rounded-lg mr-3">
               <ImagePlus size={20} />
             </span>
-            {t('settings.imageGeneration') || 'Bildgenerierung'}
+            {t('settings.imageGeneration')}
           </h2>
 
           <div className="space-y-4">
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">
-                {t('settings.imageProvider') || 'Anbieter'}
+                {t('settings.imageProvider')}
               </label>
               <select
                 value={settings.image_provider}
@@ -354,7 +354,7 @@ export default function Settings() {
                   setSettings({
                     ...settings,
                     image_provider: e.target.value,
-                    image_model: ''
+                    image_model: imgProvider?.models[0] || ''
                   });
                 }}
                 className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500 outline-none bg-white"
@@ -367,30 +367,32 @@ export default function Settings() {
 
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">
-                {t('settings.imageModel') || 'Modell'}
+                {t('settings.imageModel')}
               </label>
-              <input
-                type="text"
-                value={settings.image_model}
+              <select
+                value={settings.image_model || currentImageProvider?.models[0] || ''}
                 onChange={e => setSettings({...settings, image_model: e.target.value})}
-                className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500 outline-none"
-                placeholder={currentImageProvider?.defaultModel || 'dall-e-3'}
-              />
+                className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500 outline-none bg-white"
+              >
+                {currentImageProvider?.models.map(m => (
+                  <option key={m} value={m}>{m}</option>
+                ))}
+              </select>
               <p className="text-xs text-gray-500 mt-1">
-                {t('settings.imageModelHint') || 'Leer lassen für Standardmodell'}
+                {t('settings.imageModelHint')}
               </p>
             </div>
 
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center">
-                <Key size={14} className="mr-1" /> {t('settings.imageApiKey') || 'API-Schlüssel'}
+                <Key size={14} className="mr-1" /> {t('settings.imageApiKey')}
               </label>
               <input
                 type="password"
                 value={settings.image_api_key}
                 onChange={e => setSettings({...settings, image_api_key: e.target.value})}
                 className="w-full border border-gray-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-emerald-500 outline-none"
-                placeholder={`API Key für ${currentImageProvider?.name || 'OpenAI (DALL-E)'}`}
+                placeholder={t('settings.imageApiKeyPlaceholder', { provider: currentImageProvider?.name || 'OpenAI' })}
               />
             </div>
           </div>