fix: provider-specific endpoints and save settings to .env

- Add separate OLLAMA_API_ENDPOINT and OPENAI_API_ENDPOINT env vars
- Fix endpoint field not updating when switching providers
- Add Save Settings button to persist config to .env file
- Add OUTPUT_FILENAME_PATTERN to saved settings
- Fix dropdown checkmark not showing correct selection
- Add retry mechanism for empty dropdown options"

Author: hydropix

src/web/static/js/ui/searchable-select.js

@@ -58,6 +58,20 @@ export class SearchableSelect {
         this._bindEvents();
         this._updateFromOriginalSelect();
 
+        // Debug: log if no options found
+        if (this.allOptions.length === 0) {
+            console.warn(`[SearchableSelect] No options found for #${this.originalSelect.id}, retrying...`);
+            // Retry after a short delay (options might not be parsed yet)
+            setTimeout(() => {
+                this._updateFromOriginalSelect();
+                if (this.allOptions.length > 0) {
+                    console.log(`[SearchableSelect] Options loaded for #${this.originalSelect.id}: ${this.allOptions.length} options`);
+                } else {
+                    console.error(`[SearchableSelect] Still no options for #${this.originalSelect.id}`);
+                }
+            }, 100);
+        }
+
         // Hide original select
         this.originalSelect.style.display = 'none';
     }
@@ -327,6 +341,11 @@ export class SearchableSelect {
         this.displayText.textContent = option.label;
         this.displayText.classList.remove('placeholder');
 
+        // Update selected property for all options
+        this.allOptions.forEach(opt => {
+            opt.selected = (opt.value === option.value);
+        });
+
         // Update original select
         this.originalSelect.value = option.value;
         this.originalSelect.dispatchEvent(new Event('change', { bubbles: true }));
@@ -347,6 +366,11 @@ export class SearchableSelect {
         this.displayText.textContent = value;
         this.displayText.classList.remove('placeholder');
 
+        // Clear selected flag from all existing options
+        this.allOptions.forEach(opt => {
+            opt.selected = false;
+        });
+
         // Add option to original select if not exists
         let optionEl = this.originalSelect.querySelector(`option[value="${CSS.escape(value)}"]`);
         if (!optionEl) {
@@ -426,6 +450,12 @@ export class SearchableSelect {
         this.wrapper.classList.add('open');
         this.arrow.textContent = 'expand_less';
 
+        // Debug: log options state
+        if (this.allOptions.length === 0) {
+            console.warn(`[SearchableSelect] Opening dropdown for #${this.originalSelect.id} but allOptions is empty! Retrying...`);
+            this._updateFromOriginalSelect();
+        }
+
         // Reset search and show all options
         this.searchInput.value = '';
         this.clearBtn.style.display = 'none';
@@ -490,20 +520,21 @@ export class SearchableSelect {
         let currentGroup = null;
 
         options.forEach(opt => {
-            if (opt.value === '' && (opt.textContent.includes('Loading') || opt.textContent.includes('Enter'))) {
+            const text = opt.textContent.trim();
+            if (opt.value === '' && (text.includes('Loading') || text.includes('Enter'))) {
                 return; // Skip loading/placeholder
             }
 
             // Check for optgroup
-            if (opt.parentElement.tagName === 'OPTGROUP') {
+            if (opt.parentElement && opt.parentElement.tagName === 'OPTGROUP') {
                 currentGroup = opt.parentElement.label;
             } else {
                 currentGroup = null;
             }
 
             this.allOptions.push({
                 value: opt.value,
-                label: opt.textContent,
+                label: text,
                 description: opt.title || '',
                 group: currentGroup,
                 selected: opt.selected
@@ -529,6 +560,12 @@ export class SearchableSelect {
             this.displayText.classList.add('placeholder');
         }
 
+        // Sync 'selected' property with currentValue for all options
+        // This ensures custom renderers show the correct checkmark
+        this.allOptions.forEach(opt => {
+            opt.selected = (opt.value === this.currentValue);
+        });
+
         this.filteredOptions = [...this.allOptions];
         this._updateBadge();
 

src/web/templates/translation_interface.html

@@ -323,7 +323,7 @@ <h3>Drop files to translate</h3>
                             <span class="material-symbols-outlined">save</span>
                             Save Settings to .env
                         </button>
-                        <p style="margin: 8px 0 0 0; font-size: 0.8125rem; color: var(--text-muted-light);">
+                        <p style="margin: 8px 0 15px 0; font-size: 0.8125rem; color: var(--text-muted-light);">
                             Saves API keys, endpoints, naming convention, and current model as default values in the <code>.env</code> file.
                         </p>
                     </div>