5 files changed, 20 insertions, 89 deletions
diff --git a/FrontEnd/src/services/timeline.ts b/FrontEnd/src/services/timeline.ts
index d8c0ae00..cb5b1e32 100644
--- a/FrontEnd/src/services/timeline.ts
+++ b/FrontEnd/src/services/timeline.ts
@@ -21,7 +21,8 @@ export const timelineVisibilityTooltipTranslationMap: Record<
 };
 
 export function getTimelinePostUpdate$(
-  timelineName: string
+  owner: string,
+  timeline: string
 ): Observable<{ update: boolean; state: HubConnectionState }> {
   return new Observable((subscriber) => {
     subscriber.next({
@@ -37,8 +38,11 @@ export function getTimelinePostUpdate$(
       .withAutomaticReconnect()
       .build();
 
-    const handler = (tn: string): void => {
-      if (timelineName === tn) {
+    const o = owner;
+    const t = timeline;
+
+    const handler = (owner: string, timeline: string): void => {
+      if (owner === o && timeline === t) {
         subscriber.next({ update: true, state: connection.state });
       }
     };
@@ -64,12 +68,16 @@ export function getTimelinePostUpdate$(
       });
     });
 
-    connection.on("OnTimelinePostChanged", handler);
+    connection.on("OnTimelinePostChangedV2", handler);
 
     void connection.start().then(() => {
       subscriber.next({ update: false, state: HubConnectionState.Connected });
 
-      return connection.invoke("SubscribeTimelinePostChange", timelineName);
+      return connection.invoke(
+        "SubscribeTimelinePostChangeV2",
+        owner,
+        timeline
+      );
     });
 
     return () => {
@@ -77,7 +85,7 @@ export function getTimelinePostUpdate$(
 
       if (connection.state === HubConnectionState.Connected) {
         void connection
-          .invoke("UnsubscribeTimelinePostChange", timelineName)
+          .invoke("UnsubscribeTimelinePostChangeV2", owner, timeline)
           .then(() => connection.stop());
       }
     };
diff --git a/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts
deleted file mode 100644
index a5812808..00000000
--- a/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-
-let on = false;
-
-let reverseScrollPosition = getReverseScrollPosition();
-let reverseScrollToPosition: number | null = null;
-let lastScrollPosition = window.scrollY;
-
-export function getReverseScrollPosition(): number {
-  if (document.documentElement.scrollHeight <= window.innerHeight) {
-    return 0;
-  } else {
-    return (
-      document.documentElement.scrollHeight -
-      document.documentElement.scrollTop -
-      window.innerHeight
-    );
-  }
-}
-
-export function scrollToReverseScrollPosition(reversePosition: number): void {
-  if (document.documentElement.scrollHeight <= window.innerHeight) return;
-
-  const old = document.documentElement.style.scrollBehavior;
-  document.documentElement.style.scrollBehavior = "auto";
-
-  const newPosition =
-    document.documentElement.scrollHeight -
-    window.innerHeight -
-    reversePosition;
-
-  reverseScrollToPosition = newPosition;
-
-  window.scrollTo(0, newPosition);
-
-  document.documentElement.style.scrollBehavior = old;
-}
-
-const scrollListener = (): void => {
-  if (
-    reverseScrollToPosition != null &&
-    Math.abs(window.scrollY - reverseScrollToPosition) > 50
-  ) {
-    scrollToReverseScrollPosition(reverseScrollPosition);
-    return;
-  }
-  if (
-    reverseScrollToPosition == null &&
-    Math.abs(window.scrollY - lastScrollPosition) > 1000
-  ) {
-    scrollToReverseScrollPosition(reverseScrollPosition);
-    return;
-  }
-
-  reverseScrollToPosition = null;
-  lastScrollPosition = window.scrollY;
-  reverseScrollPosition = getReverseScrollPosition();
-};
-
-const resizeObserver = new ResizeObserver(() => {
-  scrollToReverseScrollPosition(reverseScrollPosition);
-});
-
-export default function useReverseScrollPositionRemember(): void {
-  React.useEffect(() => {
-    if (on) return;
-    on = true;
-    window.addEventListener("scroll", scrollListener);
-    resizeObserver.observe(document.documentElement);
-
-    return () => {
-      window.removeEventListener("scroll", scrollListener);
-      resizeObserver.disconnect();
-      on = false;
-    };
-  }, []);
-}
diff --git a/FrontEnd/src/utilities/useScrollToTop.ts b/FrontEnd/src/utilities/useScrollToTop.ts
index 892e3545..95c8b7b9 100644
--- a/FrontEnd/src/utilities/useScrollToTop.ts
+++ b/FrontEnd/src/utilities/useScrollToTop.ts
@@ -6,7 +6,7 @@ function useScrollToTop(
   handler: () => void,
   enable = true,
   option = {
-    maxOffset: 50,
+    maxOffset: 5,
     throttle: 1000,
   }
 ): void {
diff --git a/FrontEnd/src/views/timeline/Timeline.tsx b/FrontEnd/src/views/timeline/Timeline.tsx
index 7fb58e0c..e8b1147f 100644
--- a/FrontEnd/src/views/timeline/Timeline.tsx
+++ b/FrontEnd/src/views/timeline/Timeline.tsx
@@ -62,7 +62,10 @@ const Timeline: React.FC<TimelineProps> = (props) => {
 
   React.useEffect(() => {
     if (timelineName != null && state === "loaded") {
-      const timelinePostUpdate$ = getTimelinePostUpdate$(timelineName);
+      const timelinePostUpdate$ = getTimelinePostUpdate$(
+        timelineOwner,
+        timelineName
+      );
       const subscription = timelinePostUpdate$.subscribe(
         ({ update, state }) => {
           if (update) {
@@ -75,7 +78,7 @@ const Timeline: React.FC<TimelineProps> = (props) => {
         subscription.unsubscribe();
       };
     }
-  }, [timelineName, state, onReload, onConnectionStateChanged]);
+  }, [timelineOwner, timelineName, state, onReload, onConnectionStateChanged]);
 
   React.useEffect(() => {
     if (timelineName != null) {
diff --git a/FrontEnd/src/views/timeline/index.tsx b/FrontEnd/src/views/timeline/index.tsx
index 3bd3ae3c..65bb90f6 100644
--- a/FrontEnd/src/views/timeline/index.tsx
+++ b/FrontEnd/src/views/timeline/index.tsx
@@ -4,7 +4,6 @@ import { useParams } from "react-router-dom";
 
 import { UiLogicError } from "@/common";
 import { HttpTimelineInfo } from "@/http/timeline";
-import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
 import { generatePalette, setPalette } from "@/palette";
 
 import Timeline from "./Timeline";
@@ -29,8 +28,6 @@ const TimelinePage: React.FC = () => {
   const [connectionStatus, setConnectionStatus] =
     React.useState<HubConnectionState>(HubConnectionState.Connecting);
 
-  useReverseScrollPositionRemember();
-
   React.useEffect(() => {
     if (timeline != null && timeline.color != null) {
       return setPalette(generatePalette({ primary: timeline.color }));