Collapse already-seen sets of timeline items

ts/components/conversation/Timeline.dom.stories.tsx

@@ -15,11 +15,11 @@ import { ConversationHero } from './ConversationHero.dom.js';
 import { getDefaultConversation } from '../../test-helpers/getDefaultConversation.std.js';
 import { TypingBubble } from './TypingBubble.dom.js';
 import { ReadStatus } from '../../messages/MessageReadStatus.std.js';
-import type { WidthBreakpoint } from '../_util.std.js';
 import { ThemeType } from '../../types/Util.std.js';
 import { MessageInteractivity, TextDirection } from './Message.dom.js';
 import { PaymentEventKind } from '../../types/Payment.std.js';
 import type { PropsData as TimelineMessageProps } from './TimelineMessage.dom.js';
+import type { RenderItemProps } from '../../state/smart/TimelineItem.preload.js';
 
 const { i18n } = window.SignalContext;
 
@@ -349,14 +349,10 @@ const actions = () => ({
 });
 
 const renderItem = ({
-  messageId,
+  item,
   containerElementRef,
   containerWidthBreakpoint,
-}: {
-  messageId: string;
-  containerElementRef: React.RefObject<HTMLElement | null>;
-  containerWidthBreakpoint: WidthBreakpoint;
-}) => (
+}: RenderItemProps) => (
   <TimelineItem
     getPreferredBadge={() => undefined}
     getSharedGroupNames={() => []}
@@ -373,10 +369,11 @@ const renderItem = ({
     containerElementRef={containerElementRef}
     containerWidthBreakpoint={containerWidthBreakpoint}
     conversationId=""
-    item={items[messageId]}
+    item={items[item.id]}
     handleDebugMessage={action('handleDebugMessage')}
     renderAudioAttachment={() => <div>*AudioAttachment*</div>}
     renderContact={() => <div>*ContactName*</div>}
+    renderItem={renderItem}
     renderReactionPicker={() => <div />}
     renderUniversalTimerNotification={() => (
       <div>*UniversalTimerNotification*</div>
@@ -385,6 +382,7 @@ const renderItem = ({
     shouldCollapseBelow={false}
     shouldHideMetadata={false}
     shouldRenderDateHeader={false}
+    targetedMessage={undefined}
     {...actions()}
   />
 );
@@ -457,7 +455,13 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   isConversationSelected: true,
   isIncomingMessageRequest: overrideProps.isIncomingMessageRequest ?? false,
   isInFullScreenCall: false,
-  items: overrideProps.items ?? Object.keys(items),
+  items:
+    overrideProps.items ??
+    Object.keys(items).map(id => ({
+      type: 'none' as const,
+      id,
+      messages: undefined,
+    })),
   messageChangeCounter: 0,
   messageLoadingState: null,
   isNearBottom: null,