feat(threads): room-level Threads list panel
Lotus could view one thread at a time but had no overview of a room's threads. Add a Threads list side panel, opened from a new Threads toggle in the room header (mirrors the gallery/widgets toggles). - Lists every thread with a rich row: root sender + snippet, unread dot, "N replies - last reply <time>", and a participant avatar pile. - Segmented filter (All / Unread / Participating) and sort (Recent / Oldest by last-reply time), both persisted in localStorage (cinny_threads_filter_v1 / cinny_threads_sort_v1) and normalized via type guards. - Clicking a row opens the existing single-thread ThreadPanel by reusing setActiveThreadId; reading it clears the row's unread badge live. - Stays live via ThreadEvent.New/NewReply/Update/Delete + RoomEvent.UnreadNotifications, with a signature guard to avoid churn, and is virtualized (@tanstack/react-virtual) for busy rooms. Reuses room.getThreads()/fetchRoomThreads(), thread.hasCurrentUser- Participated / lastReply() / length, getThreadUnreadNotificationCount (muted threads zeroed), useMemberAvatar/StackedAvatar/UserAvatar, scaleSystemEmoji/trimReplyFromBody, UnreadBadge, and the Bookmarks-panel segmented-control + localStorage-atom patterns. Filter/sort logic is pure in utils/threadList.ts with 8 unit tests. New panel is wired into Room.tsx's mutually-exclusive content-panel switching. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { config, toRem } from 'folds';
|
||||
|
||||
export const ThreadsListPanel = style({
|
||||
width: toRem(340),
|
||||
'@media': {
|
||||
'(max-width: 750px)': {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
width: '100%',
|
||||
zIndex: 500,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ThreadsListHeader = style({
|
||||
flexShrink: 0,
|
||||
padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
});
|
||||
|
||||
export const ThreadsListToolbar = style({
|
||||
flexShrink: 0,
|
||||
padding: config.space.S200,
|
||||
borderBottomWidth: config.borderWidth.B300,
|
||||
});
|
||||
|
||||
export const ThreadsListContent = style({
|
||||
padding: config.space.S200,
|
||||
});
|
||||
Reference in New Issue
Block a user