From 86906682f95b58844089ef8e3267dbaa1987cdd1 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Fri, 16 Feb 2024 10:27:54 +0200
Subject: [PATCH] always scroll to top on route change, except on back nav

---
 packages/app/src/Components/Event/Thread.tsx           |  1 -
 packages/app/src/Components/ScrollToTop.tsx            | 10 +++++++---
 packages/app/src/Pages/Layout/NavSidebar.tsx           |  2 +-
 packages/app/src/Pages/Layout/index.tsx                |  2 ++
 packages/app/src/Pages/Notifications/Notifications.tsx |  1 -
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/Components/Event/Thread.tsx b/packages/app/src/Components/Event/Thread.tsx
index 44cbffbf..b5c51d2a 100644
--- a/packages/app/src/Components/Event/Thread.tsx
+++ b/packages/app/src/Components/Event/Thread.tsx
@@ -225,7 +225,6 @@ export function ThreadRoute({ id }: { id?: string }) {
 
   return (
     <ThreadContextWrapper link={link}>
-      <ScrollToTop />
       <Thread />
     </ThreadContextWrapper>
   );
diff --git a/packages/app/src/Components/ScrollToTop.tsx b/packages/app/src/Components/ScrollToTop.tsx
index d1adaa13..b1fed339 100644
--- a/packages/app/src/Components/ScrollToTop.tsx
+++ b/packages/app/src/Components/ScrollToTop.tsx
@@ -1,12 +1,16 @@
 import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigationType } from "react-router-dom";
 
 export default function ScrollToTop() {
   const { pathname } = useLocation();
+  const navigationType = useNavigationType(); // This hook is available in React Router v6
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+    if (navigationType !== "POP") {
+      window.scrollTo(0, 0);
+    }
+    // Only scrolls to top on PUSH or REPLACE, not on POP
+  }, [pathname, navigationType]);
 
   return null;
 }
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index 319616be..d55197a2 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -74,7 +74,7 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
   });
 };
 
-export default function NavSidebar({ narrow = false }: { narrow: boolean }) {
+export default function NavSidebar({ narrow = false }: { narrow?: boolean }) {
   const { publicKey, readonly } = useLogin(s => ({
     publicKey: s.publicKey,
     readonly: s.readonly,
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 75031a23..61daf820 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -20,6 +20,7 @@ import { LoginStore } from "@/Utils/Login";
 
 import NavSidebar from "./NavSidebar";
 import RightColumn from "./RightColumn";
+import ScrollToTop from "@/Components/ScrollToTop";
 
 export default function Index() {
   const location = useLocation();
@@ -57,6 +58,7 @@ export default function Index() {
 
   return (
     <ErrorBoundary>
+      <ScrollToTop />
       <div className="flex justify-center">
         <div className="w-full max-w-screen-xl">
           <div className="flex flex-row">
diff --git a/packages/app/src/Pages/Notifications/Notifications.tsx b/packages/app/src/Pages/Notifications/Notifications.tsx
index d7dd613b..857267ea 100644
--- a/packages/app/src/Pages/Notifications/Notifications.tsx
+++ b/packages/app/src/Pages/Notifications/Notifications.tsx
@@ -53,7 +53,6 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
 
   return (
     <>
-      <ScrollToTop />
       <div className="main-content">
         {CONFIG.features.notificationGraph && (
           <Suspense fallback={<PageSpinner />}>