Mail list: a new page starts at the top

Paging while scrolled down kept the old scroll position, so clicking
next dropped you into the middle of the following fifty with nothing to
signal you had moved.

The list is virtualized, so there is no natural anchor to reset — the
scroll container has to be told. MessageList now takes the page number
and scrolls back to the top when it changes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018SqJYt7jD7oUEkoY68sBZo

frontend/src/components/list/MessageList.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { useT } from "../../i18n";
 import { api } from "../../lib/api";
@@ -56,6 +56,7 @@ function Paperclip() {
 // Virtualized thread list (SPEC §2 list/MessageList.tsx).
 export function MessageList({
   threads,
+  page,
   selectedId,
   folder,
   onSelect,
@@ -69,6 +70,8 @@ export function MessageList({
   onToggleCheck,
 }: {
   threads: ThreadSummary[];
+  /** Which page of the list this is. Changing it scrolls back to the top. */
+  page: number;
   selectedId?: string;
   folder: string;
   onSelect: (id: string) => void;
@@ -106,6 +109,12 @@ export function MessageList({
     overscan: 8,
   });
 
+  // A new page starts at the top. Paging while scrolled down would otherwise
+  // drop you into the middle of the next fifty with no sense of having moved.
+  useEffect(() => {
+    parentRef.current?.scrollTo({ top: 0 });
+  }, [page]);
+
   if (threads.length === 0) {
     return <div className="p-6 text-[15px] text-app-faint">{t("mail.noConversations")}</div>;
   }

frontend/src/routes/MailLayout.tsx

@@ -842,6 +842,7 @@ export function MailLayout() {
           ) : (
             <MessageList
               threads={pageThreads}
+              page={page}
               selectedId={threadId}
               folder={currentFolder}
               onSelect={(id) => navigate(`/mail/t/${id}`)}