Read the locale where users can actually read it, and say which Stalwart answered

The account locale came from `x:Account/get`, which needs `sysAccountGet` — a
permission the built-in `user` role is not given, so the setting silently fell
back to the browser locale for exactly the people most likely to have set it.
Stalwart 0.16 carries the same field on `x:AccountSettings`, whose
`sysAccountSettingsGet` *is* part of that role. Both are now asked for in one
request and whichever answers wins, so admins and older servers keep working.

That pair of replies also says which generation we are talking to: only 0.16+
can parse the method name at all. About now reports that, plus the edition
from /api/account where the server offers it. It does not report a version
number because Stalwart does not publish one to clients — it hardcodes a
public "1.0.0" and keeps the real version to its SMTP internals — so the
screen says what was actually detected rather than inventing precision.

Also adds a light/dark toggle to the top bar, left of the settings button. The
stored setting is three-way, so the button acts on the theme actually on
screen: whichever one you see, a click gives you the other. Choosing "match
system" again stays in Settings › Appearance, where a three-way choice belongs.

web/src/jmap/types.ts

@@ -32,6 +32,12 @@ export interface JmapSession {
     remember: boolean;
     /** Locale configured for the account in Stalwart, if the server exposes it. */
     userLocale?: string | null;
+    /** What the upstream server was willing to say about itself. */
+    server?: {
+      /** Which API generation answered: Stalwart publishes no version number. */
+      generation?: "0.16+" | "pre-0.16" | null;
+      edition?: string | null;
+    };
   };
 }
 

web/src/store/settings.ts

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { create } from "zustand";
 import { loadJson, saveJson } from "@/lib/storage";
 import { setDateTimePrefs, type DateFormat, type TimeFormat } from "@/lib/datetime";
@@ -186,6 +187,23 @@ if (typeof window !== "undefined") {
   window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", () => applyTheme());
 }
 
+/**
+ * The theme actually on screen, which is not the same as the setting: "system"
+ * resolves to whatever the OS is doing right now, and follows it as it changes.
+ */
+export function useEffectiveTheme(): "light" | "dark" {
+  const theme = useSettings((s) => s.settings.theme);
+  const [systemDark, setSystemDark] = useState(() => window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false);
+  useEffect(() => {
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    if (!mq) return;
+    const onChange = () => setSystemDark(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return theme === "dark" || (theme === "system" && systemDark) ? "dark" : "light";
+}
+
 export const settings = () => useSettings.getState().settings;
 
 /**

web/src/views/AppShell.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { Link, useLocation } from "wouter";
-import { Calendar, ChevronsUpDown, FolderOpen, HelpCircle, Mail, Menu as MenuIcon, PenSquare, Settings, Users, LogOut, Plus, RefreshCw } from "lucide-react";
+import { Calendar, ChevronsUpDown, FolderOpen, HelpCircle, Mail, Menu as MenuIcon, Moon, PenSquare, Settings, Sun, Users, LogOut, Plus, RefreshCw } from "lucide-react";
 import { useSession } from "@/store/session";
-import { useSettings } from "@/store/settings";
+import { useEffectiveTheme, useSettings } from "@/store/settings";
 import { useMail } from "@/store/mail";
 import { draftFromMailto, useCompose } from "@/store/compose";
 import { Avatar, useIsMobile } from "@/ui/misc";
@@ -70,6 +70,7 @@ export function AppShell({ children }: { children: ReactNode }) {
           <button className="icon-btn hide-mobile" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)" onClick={() => setHelpOpen(true)}>
             <HelpCircle size={21} />
           </button>
+          <ThemeToggle />
           <Link href="/settings" className={`icon-btn ${section === "settings" ? "active" : ""}`} aria-label="Settings" title="Settings">
             <Settings size={21} />
           </Link>
@@ -196,3 +197,27 @@ function QuotaBar() {
     </div>
   );
 }
+
+/**
+ * Flip between light and dark from the top bar.
+ *
+ * The stored setting has a third value, "system", so the button acts on what
+ * is actually on screen rather than on the setting: whichever theme you can
+ * see, one click gives you the other one. Choosing "match system" again lives
+ * in Settings › Appearance, where the three-way choice belongs.
+ */
+function ThemeToggle() {
+  const effective = useEffectiveTheme();
+  const update = useSettings((s) => s.update);
+  const next = effective === "dark" ? "light" : "dark";
+  return (
+    <button
+      className="icon-btn"
+      aria-label={`Switch to ${next} mode`}
+      title={`Switch to ${next} mode`}
+      onClick={() => update({ theme: next })}
+    >
+      {effective === "dark" ? <Sun size={21} /> : <Moon size={21} />}
+    </button>
+  );
+}

web/src/views/settings/AboutSettings.tsx

@@ -19,11 +19,13 @@ export function AboutSettings() {
       <table className="sessions-table">
         <tbody>
           <tr><td>Signed in as</td><td>{session?.username}</td></tr>
+          <tr><td>Stalwart</td><td>{describeServer(session?.ihasmail?.server)}</td></tr>
           <tr><td>Accounts</td><td>{Object.values(session?.accounts ?? {}).map((a) => a.name).join(", ")}</td></tr>
           <tr><td>Max upload</td><td>{Math.round(client.maxSizeUpload / 1048576)} MB</td></tr>
           <tr><td>Image privacy proxy</td><td>{session?.ihasmail?.imageProxy ? "enabled" : "disabled"}</td></tr>
         </tbody>
       </table>
+      <p className="hint" style={{ marginTop: 6 }}>Stalwart does not publish its version number to mail clients, so ihasmail reports the API generation it detected instead.</p>
       <h2>Server capabilities</h2>
       <div className="row wrap gap-4">
         {caps.map((c) => <span key={c} className="chip mono" style={{ fontSize: ".78em" }}>{c.replace("urn:ietf:params:jmap:", "")}</span>)}
@@ -31,3 +33,15 @@ export function AboutSettings() {
     </div>
   );
 }
+
+/**
+ * Stalwart deliberately withholds its version from clients (it reports a fixed
+ * "1.0.0" wherever it publishes one at all), so the most honest thing we can
+ * show is which generation of its API answered us, plus the edition where the
+ * server reports it.
+ */
+function describeServer(server: { generation?: "0.16+" | "pre-0.16" | null; edition?: string | null } | undefined): string {
+  if (!server?.generation) return "not detected";
+  const generation = server.generation === "0.16+" ? "0.16 or newer" : "older than 0.16";
+  return server.edition ? `${generation} (${server.edition})` : generation;
+}