feat(ui): Transcription Language picker in Settings > Hardware (T8.7, M4.2)

src/lib/views/Settings.svelte

@@ -796,6 +796,42 @@
             </li>
           {/each}
         </ul>
+
+        <h4>Transcription Language</h4>
+        {@const activeModel = settings.models.find((m) => m.active)}
+        {#if activeModel?.multilingual}
+          <label
+            >Language
+            <select
+              value={settings.settings.whisper_language ?? ""}
+              onchange={(e) => {
+                const v = (e.target as HTMLSelectElement).value;
+                settings.setWhisperLanguage(v || null);
+              }}
+            >
+              <option value="">Auto-detect</option>
+              {#each settings.languages as l (l.code)}
+                <option value={l.code}>{l.label}</option>
+              {/each}
+            </select>
+          </label>
+          <p class="muted">
+            Applies to the next recording. The language actually used is shown on each meeting
+            afterward.
+          </p>
+        {:else}
+          <label
+            >Language
+            <select disabled aria-describedby="language-disabled-hint">
+              <option>English only</option>
+            </select>
+          </label>
+          <p class="muted" id="language-disabled-hint">
+            {activeModel
+              ? `"${activeModel.label}" is English-only.`
+              : "No model selected."} Switch to a multilingual model above to choose a language.
+          </p>
+        {/if}
       </section>
     {:else if section === "storage"}
       <section>
@@ -1775,6 +1811,12 @@
     border-radius: 5px;
     padding: 0.35rem;
   }
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
   .artifacts {
     border: 1px solid var(--border);
     border-radius: 6px;