3 files changed, 21 insertions, 26 deletions
diff --git a/src/popup/popup.css b/src/popup/popup.css
index 8ed312a..964454d 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -20,17 +20,15 @@ h1 {
   margin-bottom: 10px;
 }
 
-.toggle-label {
-  font-weight: 500;
-}
-
-.toggle-label + input[type='checkbox'] {
-  margin-left: 8px;
+.toggle-row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
 }
 
-.row .toggle-label {
-  display: inline-block;
-  margin-bottom: 4px;
+.toggle-label {
+  font-weight: 500;
+  margin: 0;
 }
 
 label {
diff --git a/src/popup/popup.html b/src/popup/popup.html
index 92099a7..e51475f 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -8,7 +8,7 @@
   <main>
     <h1>Ollama Translations</h1>
 
-    <section class="row">
+    <section class="row toggle-row">
       <label class="toggle-label" for="enabled-toggle">翻訳機能</label>
       <input type="checkbox" id="enabled-toggle" role="switch">
     </section>
@@ -29,6 +29,6 @@
 
     <button id="open-options" type="button">詳細設定を開く</button>
   </main>
-  <script src="popup.js"></script>
+  <script type="module" src="popup.js"></script>
 </body>
 </html>
 \ No newline at end of file
diff --git a/src/popup/popup.js b/src/popup/popup.js
index c07851e..612d0fd 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import { LANGUAGES, ERROR_CODES, RUNTIME_MESSAGES } from '../shared/constants.js';
-import { defaultSettings } from '../shared/settings-schema.js';
+import { defaultSettings, sanitizeSettings } from '../shared/settings-schema.js';
 
 const $enabled = /** @type {HTMLInputElement} */ (document.getElementById('enabled-toggle'));
 const $model = /** @type {HTMLSelectElement} */ (document.getElementById('model-select'));
@@ -83,21 +83,25 @@ async function loadModels() {
 
 async function loadSettings() {
   const result = await browser.storage.local.get({ settings: null });
-  const settings = result.settings || defaultSettings();
+  const settings = sanitizeSettings(result.settings || defaultSettings());
   $enabled.checked = Boolean(settings.enabled);
+  for (const lang of LANGUAGES) {
+    const option = document.createElement('option');
+    option.value = lang.code;
+    option.textContent = lang.label;
+    $language.append(option);
+  }
   $language.value = settings.targetLanguage || 'ja';
   fillModels(knownModels, settings.model || '');
-  if (settings.model) {
-    // Preserve the stored model even before the first list load.
-    fillModels(knownModels.length ? knownModels : [settings.model], settings.model);
-  }
 }
 
 async function persist(patch) {
   const result = await browser.storage.local.get({ settings: null });
-  const settings = result.settings || defaultSettings();
+  const settings = sanitizeSettings(result.settings || defaultSettings());
   const merged = { ...settings, ...patch };
-  await browser.storage.local.set({ settings: merged });
+  // Sanitize before saving so unrelated fields stay valid.
+  const validated = sanitizeSettings(merged);
+  await browser.storage.local.set({ settings: validated });
 }
 
 $enabled.addEventListener('change', () => {
@@ -121,13 +125,6 @@ $openOptions.addEventListener('click', () => {
   browser.runtime.openOptionsPage();
 });
 
-// Init
-for (const language of LANGUAGES) {
-  const option = document.createElement('option');
-  option.value = language.code;
-  option.textContent = language.label;
-  $language.append(option);
-}
 void (async () => {
   await loadSettings();
   await loadModels();