feat(webmail): conversations - list, stacked reader, inline reply, settings switch

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

services/webmail/src/app/(user)/user/settings/page.tsx

@@ -28,6 +28,7 @@ import { useFolders } from "../../../../lib/useFolders";
 import { AvatarEditor } from "../../../../components/AvatarEditor";
 import { bumpAvatar } from "../../../../lib/avatarVersion";
 import { useAccount } from "../../../../lib/useAccount";
+import { useConversationView } from "../../../../lib/conversations";
 import { moveTargets } from "../../../../lib/mailCounts";
 
 interface SieveRule {
@@ -90,6 +91,7 @@ export default function UserSettingsPage() {
   const [vacationSaved, setVacationSaved] = useState(false);
 
   const [signature, setSignature] = useState("");
+  const conversationView = useConversationView();
   const signatureRef = useRef<HTMLDivElement>(null);
 
   // execCommand edits the DOM directly, so the mirrored value is re-read here
@@ -989,6 +991,24 @@ export default function UserSettingsPage() {
             <div className="max-w-[280px]">
               <LanguageSwitcher />
             </div>
+
+            {/* How the list is read, which belongs with how it is shown. */}
+            <label className="flex max-w-[560px] cursor-pointer items-start gap-3 rounded-xl bg-dark-card p-3.5 shadow-edge">
+              <input
+                type="checkbox"
+                role="switch"
+                checked={conversationView.enabled}
+                disabled={!conversationView.ready}
+                onChange={(e) => void conversationView.setEnabled(e.target.checked)}
+                className="mt-0.5 h-4 w-4 flex-none accent-indigo-500"
+              />
+              <span className="min-w-0">
+                <span className="block text-[13.5px] text-slate-100">{t("conversations.conversationView")}</span>
+                <span className="mt-0.5 block text-[12.5px] leading-relaxed text-slate-400">
+                  {t("conversations.conversationViewHint")}
+                </span>
+              </span>
+            </label>
           </section>
         )}
       </div>