Compose: spelling and grammar check with LanguageTool

A self-hosted LanguageTool (dev: docker/docker-compose.yml, started by
`make up`) checks what the user writes in the compose window, through
POST /api/spellcheck — the browser never talks to the engine directly.

- Marks are CSS highlights over the text, never written into the message: red
  wavy for spelling, blue for grammar/style. Clicking one shows the message,
  up to five suggestions (applied as typed, so Ctrl+Z undoes them) and Ignore.
  The popup, like the link popup, opens above its anchor when there is no
  room below.
- Checked after a pause in typing; the signature and quoted original are
  skipped; marks on words just edited drop at once; a check overtaken by a
  newer one, by turning checking off, or by closing the window is discarded.
- With "auto", text is checked in chunks of lines, each in its own detected
  language — LanguageTool settles on one language per request, so a mixed
  Polish/English message had every English word flagged as a Polish typo.
- Settings > Appearance: on/off and language (Auto-detect or any of the
  engine's languages); the compose window's More menu overrides it for one
  message. The browser's own spellcheck steps aside while ours runs, and comes
  back when it is off or the server has no engine (503 from the endpoint).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/routes/settings/Settings.tsx

@@ -720,6 +720,70 @@ function ServerRow({
   );
 }
 
+// Spelling and grammar check in the compose window (LanguageTool on the server).
+function SpellcheckSetting() {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const settings = useQuery({ queryKey: ["settings"], queryFn: api.settings });
+  // Also tells us whether this server has a checker at all (503 when not).
+  const languages = useQuery({
+    queryKey: ["spellcheck-languages"],
+    queryFn: api.spellcheckLanguages,
+    retry: false,
+    staleTime: 3_600_000,
+  });
+  const patch = useMutation({
+    mutationFn: api.patchSettings,
+    onSuccess: (data) => queryClient.setQueryData(["settings"], data),
+  });
+  const on = settings.data?.spellcheck_enabled ?? true;
+  const unavailable = languages.isError;
+
+  return (
+    <div className="space-y-2 border-b border-app-border py-3 text-sm">
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-app-muted">{t("settings.spellcheck")}</span>
+        <div className="flex gap-1 rounded-lg border border-app-border p-0.5">
+          {([true, false] as const).map((value) => (
+            <button
+              key={String(value)}
+              disabled={unavailable || patch.isPending}
+              onClick={() => patch.mutate({ spellcheck_enabled: value })}
+              className={`rounded px-3 py-1 disabled:opacity-50 ${
+                on === value ? "bg-app-active font-medium text-app-fg" : "text-app-muted hover:bg-app-hover"
+              }`}
+            >
+              {t(value ? "settings.on" : "settings.off")}
+            </button>
+          ))}
+        </div>
+      </div>
+      {unavailable ? (
+        <p className="text-xs text-app-faint">{t("settings.spellcheckUnavailable")}</p>
+      ) : (
+        <>
+          <label className="flex items-center justify-between gap-3">
+            <span className="text-app-muted">{t("settings.spellcheckLanguage")}</span>
+            <select
+              className="max-w-[60%] rounded border border-app-border bg-app-surface px-2 py-1 disabled:opacity-50"
+              disabled={!on || patch.isPending}
+              value={settings.data?.spellcheck_language ?? "auto"}
+              onChange={(e) => patch.mutate({ spellcheck_language: e.target.value })}
+            >
+              <option value="auto">{t("settings.spellcheckAuto")}</option>
+              {(languages.data ?? []).map((l) => (
+                <option key={l.code} value={l.code}>
+                  {l.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        </>
+      )}
+    </div>
+  );
+}
+
 function AppearanceSection() {
   const t = useT();
   const queryClient = useQueryClient();
@@ -757,6 +821,7 @@ function AppearanceSection() {
         {/* Saved per device, like the theme: the right choice depends on the screen. */}
         <p className="text-xs text-app-faint">{t("display.phoneNote")}</p>
       </div>
+      <SpellcheckSetting />
       <label className="flex items-center justify-between border-b border-app-border py-2 text-sm">
         <span className="text-app-muted">{t("settings.threadOrder")}</span>
         <select