Fix auto read (#1466)

* add height to bottom anchor

* add width to bottom anchor

* add make bottom anchor inline-block

* try mark as read on focus receive

src/app/hooks/useDocumentFocusChange.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export const useDocumentFocusChange = (onChange: (focus: boolean) => void) => {
+  useEffect(() => {
+    let localFocus = document.hasFocus();
+
+    const handleFocus = () => {
+      if (document.hasFocus()) {
+        if (localFocus) return;
+        localFocus = true;
+        onChange(localFocus);
+      } else if (localFocus) {
+        localFocus = false;
+        onChange(localFocus);
+      }
+    };
+
+    document.addEventListener('focusin', handleFocus);
+    document.addEventListener('focusout', handleFocus);
+    return () => {
+      document.removeEventListener('focusin', handleFocus);
+      document.removeEventListener('focusout', handleFocus);
+    };
+  }, [onChange]);
+};

src/app/organisms/room/RoomTimeline.tsx

@@ -133,6 +133,7 @@ import { MessageEvent } from '../../../types/matrix/room';
 import initMatrix from '../../../client/initMatrix';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import cons from '../../../client/state/cons';
+import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
 
 const TimelineFloat = as<'div', css.TimelineFloatVariants>(
   ({ position, className, ...props }, ref) => (
@@ -606,13 +607,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         // keep paginating timeline and conditionally mark as read
         // otherwise we update timeline without paginating
         // so timeline can be updated with evt like: edits, reactions etc
-        if (atBottomRef.current && document.hasFocus()) {
-          if (!unreadInfo) {
-            markAsRead(mEvt.getRoomId());
+        if (atBottomRef.current) {
+          if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
+            requestAnimationFrame(() => markAsRead(mEvt.getRoomId()));
           }
 
+          if (document.hasFocus()) {
             scrollToBottomRef.current.count += 1;
             scrollToBottomRef.current.smooth = true;
+          }
           setTimeline((ct) => ({
             ...ct,
             range: {
@@ -627,7 +630,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           setUnreadInfo(getRoomUnreadInfo(room));
         }
       },
-      [room, unreadInfo]
+      [mx, room, unreadInfo]
     )
   );
 
@@ -665,13 +668,13 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   const tryAutoMarkAsRead = useCallback(() => {
     if (!unreadInfo) {
-      markAsRead(room.roomId);
+      requestAnimationFrame(() => markAsRead(room.roomId));
       return;
     }
     const evtTimeline = getEventTimeline(room, unreadInfo.readUptoEventId);
     const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
     if (latestTimeline === room.getLiveTimeline()) {
-      markAsRead(room.roomId);
+      requestAnimationFrame(() => markAsRead(room.roomId));
     }
   }, [room, unreadInfo]);
 
@@ -705,6 +708,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     useCallback(() => atBottomAnchorRef.current, [])
   );
 
+  useDocumentFocusChange(
+    useCallback(
+      (inFocus) => {
+        if (inFocus && atBottomRef.current) {
+          tryAutoMarkAsRead();
+        }
+      },
+      [tryAutoMarkAsRead]
+    )
+  );
+
   // Handle up arrow edit
   useKeyDown(
     window,