A few small Timeline fixes

stylesheets/components/SystemMessage.scss

@@ -22,8 +22,8 @@
   flex-direction: column;
   justify-content: center;
   line-height: 16px;
-  padding-bottom: 16px;
-  padding-top: 16px;
+  padding-bottom: 10px;
+  padding-top: 10px;
 
   @include mixins.light-theme {
     color: variables.$color-gray-60;

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

@@ -481,7 +481,10 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
 });
 
 export function OldestAndNewest(): React.JSX.Element {
-  const props = useProps();
+  const props = useProps({
+    haveOldest: true,
+    haveNewest: true,
+  });
 
   return <Timeline {...props} />;
 }
@@ -545,12 +548,6 @@ export function TargetIndexToTop(): React.JSX.Element {
   return <Timeline {...props} />;
 }
 
-export function TypingIndicator(): React.JSX.Element {
-  const props = useProps({ isSomeoneTyping: true });
-
-  return <Timeline {...props} />;
-}
-
 export function WithInvitedContactsForANewlyCreatedGroup(): React.JSX.Element {
   const props = useProps({
     invitedContactsForNewlyCreatedGroup: [

ts/components/conversation/Timeline.dom.tsx

@@ -309,7 +309,7 @@ export class Timeline extends React.Component<
         const messageId = items[oldestUnseenIndex];
         targetMessage(messageId, id);
       } else {
-        this.#scrollToItemIndex(oldestUnseenIndex);
+        this.#lastSeenIndicatorRef.current?.scrollIntoView();
       }
     } else if (haveNewest) {
       this.#scrollToBottom(setFocus);
@@ -683,6 +683,7 @@ export class Timeline extends React.Component<
       items: newItems,
       messageChangeCounter,
       messageLoadingState,
+      oldestUnseenIndex,
     } = this.props;
 
     const containerEl = this.#containerRef.current;
@@ -742,6 +743,7 @@ export class Timeline extends React.Component<
       const numberToKeepAtTop = this.#maxVisibleRows * 5;
       const shouldDiscardNewerMessages: boolean =
         !this.#isAtBottom() &&
+        oldestUnseenIndex == null &&
         loadingStateThatJustFinished ===
           TimelineMessageLoadingState.LoadingOlderMessages &&
         newItems.length > numberToKeepAtTop;

ts/groups.preload.ts

@@ -5130,6 +5130,8 @@ function extractDiffs({
         expireTimer,
         sourceServiceId: isReJoin ? undefined : sourceServiceId,
       },
+      readStatus: ReadStatus.Read,
+      seenStatus: isFromUs ? SeenStatus.Seen : SeenStatus.Unseen,
     };
   }