Enhance API key handling in settings and vocab services: Update key retrieval logic to improve validation and status reporting. Introduce new localization strings for key status messages in English, German, and Spanish. Update LanguageAssistantView to display key status dynamically, enhancing user feedback on API key management.

frontend/src/views/settings/LanguageAssistantView.vue

@@ -51,6 +51,9 @@
                         :placeholder="apiKeyPlaceholder"
                     />
                     <span class="language-assistant-settings__hint">{{ $t('settings.languageAssistant.apiKeyHint') }}</span>
+                    <span class="language-assistant-settings__hint" :class="`language-assistant-settings__key-status language-assistant-settings__key-status--${keyStatus}`">
+                        {{ keyStatusLabel }}
+                    </span>
                 </label>
             </div>
 
@@ -84,6 +87,7 @@ export default {
             },
             hasKey: false,
             keyLast4: null,
+            keyStatus: 'missing',
             saving: false,
             loadError: null
         };
@@ -100,6 +104,14 @@ export default {
                 });
             }
             return this.$t('settings.languageAssistant.apiKeyPlaceholderNew');
+        },
+        keyStatusLabel() {
+            const statusKey = {
+                stored: 'settings.languageAssistant.keyStatusStored',
+                invalid: 'settings.languageAssistant.keyStatusInvalid',
+                missing: 'settings.languageAssistant.keyStatusMissing'
+            }[this.keyStatus] || 'settings.languageAssistant.keyStatusMissing';
+            return this.$t(statusKey);
         }
     },
     async mounted() {
@@ -115,6 +127,7 @@ export default {
                 this.form.model = data.model || 'gpt-4o-mini';
                 this.hasKey = data.hasKey;
                 this.keyLast4 = data.keyLast4;
+                this.keyStatus = data.keyStatus || (data.hasKey ? 'stored' : 'missing');
                 this.form.apiKey = '';
                 this.form.clearKey = false;
             } catch (e) {
@@ -208,6 +221,18 @@ export default {
     font-size: 0.8rem;
     opacity: 0.8;
 }
+.language-assistant-settings__key-status {
+    font-weight: 600;
+}
+.language-assistant-settings__key-status--stored {
+    color: #2e7d32;
+}
+.language-assistant-settings__key-status--invalid {
+    color: #c62828;
+}
+.language-assistant-settings__key-status--missing {
+    color: #8a6d3b;
+}
 .language-assistant-settings__toggle {
     display: flex;
     align-items: center;