...

3 files changed, 68 insertions, 1 deletions

diff --git a/FrontEnd/src/utilities/url.ts b/FrontEnd/src/utilities/url.ts
index 4f2a6ecd..45ad0ab7 100644
--- a/FrontEnd/src/utilities/url.ts
+++ b/FrontEnd/src/utilities/url.ts
@@ -13,5 +13,12 @@ export function applyQueryParameters<T>(url: string, query: T): string {
       console.error("Unknown query parameter type. Param: ", value);
     }
   }
-  return url + "?" + params.toString();
+
+  const p = params.toString();
+
+  if (p == "") {
+    return url;
+  }
+
+  return url + "?" + p;
 }
diff --git a/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts
new file mode 100644
index 00000000..6fdd4b43
--- /dev/null
+++ b/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts
@@ -0,0 +1,56 @@
+import React from "react";
+
+let on = false;
+
+let rememberedReversePosition = getReverseScrollPosition();
+
+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;
+
+  window.scrollTo(0, newPosition);
+
+  document.documentElement.style.scrollBehavior = old;
+}
+
+const scrollListener = (): void => {
+  rememberedReversePosition = getReverseScrollPosition();
+};
+
+const resizeObserver = new ResizeObserver(() => {
+  scrollToReverseScrollPosition(rememberedReversePosition);
+});
+
+export default function useReverseScrollPositionRemember(): void {
+  React.useEffect(() => {
+    if (on) return;
+    on = true;
+    window.addEventListener("scroll", scrollListener);
+    resizeObserver.observe(document.documentElement);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", scrollListener);
+      on = false;
+    };
+  }, []);
+}
diff --git a/FrontEnd/src/views/timeline/index.tsx b/FrontEnd/src/views/timeline/index.tsx
index cb9fb46f..6d276e25 100644
--- a/FrontEnd/src/views/timeline/index.tsx
+++ b/FrontEnd/src/views/timeline/index.tsx
@@ -3,6 +3,8 @@ import { useParams } from "react-router-dom";
 
 import { UiLogicError } from "@/common";
 
+import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
+
 import Timeline from "./Timeline";
 
 const TimelinePage: React.FC = () => {
@@ -13,6 +15,8 @@ const TimelinePage: React.FC = () => {
 
   const timeline = timelineNameParam || "self";
 
+  useReverseScrollPositionRemember();
+
   return (
     <div className="container">
       <Timeline timelineOwner={owner} timelineName={timeline} />