feat(threads): "Mark all read" in the threads list (#165)

A "Mark all read" chip appears in the Threads panel header whenever any
thread in the room has unread replies, and sends one threaded receipt per
unread thread (never the root — a root lives in the main timeline and a
receipt there would drag the MAIN read marker backwards, the P6
regression). Honours the private-receipt settings.

Verified: two threads with unread replies → the chip appears, the rows
say "unread" in their labels; after clicking, no unread rows and the chip
is gone.

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

src/app/features/room/thread/ThreadsListPanel.tsx

@@ -1,8 +1,20 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
 import { atomWithStorage, createJSONStorage } from 'jotai/utils';
 import { NotificationCountType, Room, Thread } from 'matrix-js-sdk';
-import { Avatar, Box, Button, Header, Icon, IconButton, Icons, Scroll, Text, config } from 'folds';
+import {
+  Avatar,
+  Box,
+  Button,
+  Chip,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Scroll,
+  Text,
+  config,
+} from 'folds';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import * as css from './ThreadsListPanel.css';
@@ -14,6 +26,10 @@ import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge
 import { useMemberAvatar } from '../../../hooks/useMemberAvatar';
 import { trimReplyFromBody } from '../../../utils/room';
 import { scaleSystemEmoji } from '../../../plugins/react-custom-html-parser';
+import { markAllThreadsRead } from '../../../utils/markThreadsRead';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useSetting } from '../../../state/hooks/settings';
+import { settingsAtom } from '../../../state/settings';
 import { threadNotificationsAtom } from '../../../state/threadNotifications';
 import { getMutedThreads } from '../../../utils/threadNotifications';
 import { nameInitials } from '../../../utils/common';
@@ -259,6 +275,22 @@ export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPan
     };
   }, [threads, room, filter, sort, threadNotifications]);
 
+  // [Gitea #165] "Mark all read" — one threaded receipt per unread thread.
+  const mx = useMatrixClient();
+  const [marking, setMarking] = useState(false);
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [privateReadReceipts] = useSetting(settingsAtom, 'privateReadReceipts');
+  const totalUnread = useMemo(
+    () => [...unreadById.values()].reduce((n, c) => n + c, 0),
+    [unreadById],
+  );
+  const handleMarkAllRead = useCallback(() => {
+    setMarking(true);
+    markAllThreadsRead(mx, room, hideActivity || privateReadReceipts).finally(() =>
+      setMarking(false),
+    );
+  }, [mx, room, hideActivity, privateReadReceipts]);
+
   const scrollRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
   const virtualizer = useVirtualizer({
     count: visible.length,
@@ -291,6 +323,19 @@ export function ThreadsListPanel({ room, onClose, onOpenThread }: ThreadsListPan
               {room.name}
             </Text>
           </Box>
+          {totalUnread > 0 && (
+            <Chip
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              outlined
+              disabled={marking}
+              onClick={handleMarkAllRead}
+              before={<Icon size="50" src={Icons.Check} />}
+            >
+              <Text size="B300">Mark all read</Text>
+            </Chip>
+          )}
           <IconButton size="300" radii="300" aria-label="Close threads" onClick={onClose}>
             <Icon src={Icons.Cross} />
           </IconButton>