feat(threads): Thread Panel — full side drawer (P3-8)
Right-side thread drawer (MembersDrawer pattern; mobile fullscreen): - ThreadPanel: header + close/Escape, ThreadTimeline, its own RoomInput (threadRootId prop; drafts/replies/uploads isolated per roomId::threadId; schedule + slash-commands off in threads v1) and threaded mark-as-read. - ThreadTimeline: lean reimplementation over thread.liveTimeline — copied useTimelinePagination pattern (/relations back-pagination + decryption), virtualized, root event emphasized + "N replies" divider, reactions/edits/ redactions, and a pending strip (chronological local echo never enters the thread timelineSet — rendered from LocalEchoUpdated instead). - ThreadSummary chips on root messages (server-aggregated bundle or live Thread; unread badge via getThreadUnreadNotificationCount) keep threads discoverable now that replies leave the main timeline. - Reply-in-Thread menu + thread indicators open the panel; deep links to thread events redirect into it. - State: roomIdToActiveThreadIdAtomFamily + getThreadDraftKey (+18 tests). Gates: tsc clean, eslint 0 errors, build OK, 616/617 tests (1 IDB skip). Awaiting live QA; release note: threaded replies no longer render inline. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
import React from 'react';
|
||||
import { Badge, Box, Chip, Icon, Icons, Text, config } from 'folds';
|
||||
import { MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { useThreadSummary } from '../../../hooks/useThreadSummary';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../../state/settings';
|
||||
import { timeDayMonthYear, timeHourMinute, today } from '../../../utils/time';
|
||||
|
||||
type ThreadSummaryProps = {
|
||||
rootEvent: MatrixEvent;
|
||||
room: Room;
|
||||
onOpen: (threadId: string) => void;
|
||||
};
|
||||
export function ThreadSummary({ rootEvent, room, onOpen }: ThreadSummaryProps) {
|
||||
const { summary, unread } = useThreadSummary(rootEvent, room);
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
|
||||
if (!summary || summary.count === 0) return null;
|
||||
|
||||
const { count, latestTs } = summary;
|
||||
const latestStr =
|
||||
latestTs !== undefined
|
||||
? today(latestTs)
|
||||
? timeHourMinute(latestTs, hour24Clock)
|
||||
: timeDayMonthYear(latestTs)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Box style={{ marginTop: config.space.S200 }}>
|
||||
<Chip
|
||||
variant="SurfaceVariant"
|
||||
radii="300"
|
||||
before={<Icon size="50" src={Icons.Thread} />}
|
||||
after={
|
||||
unread > 0 ? <Badge variant="Success" fill="Solid" radii="Pill" size="200" /> : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
const threadId = rootEvent.getId();
|
||||
if (threadId) onOpen(threadId);
|
||||
}}
|
||||
>
|
||||
<Text size="T200">
|
||||
{count === 1 ? '1 reply' : `${count} replies`}
|
||||
{latestStr ? ` · ${latestStr}` : ''}
|
||||
</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user