From 49005d44cec17e8d5aff8559633f174040c79ff7 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Wed, 23 Oct 2024 11:04:48 +0200
Subject: [PATCH] Reset/restore scroll when navigating through the app (#3410)

---
 frontend/src/routeTree.gen.ts                         | 11 +++++++++++
 frontend/src/routes/__root.tsx                        |  7 ++++++-
 .../src/routes/_account.sessions.browsers.lazy.tsx    |  2 ++
 frontend/src/routes/_account.sessions.index.lazy.tsx  |  2 ++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
index d96801a8f..f1d6e4762 100644
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -34,6 +34,7 @@ const PasswordChangeSuccessLazyImport = createFileRoute(
 // Create/Update Routes
 
 const ResetCrossSigningRoute = ResetCrossSigningImport.update({
+  id: '/reset-cross-signing',
   path: '/reset-cross-signing',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
@@ -46,6 +47,7 @@ const AccountRoute = AccountImport.update({
 } as any).lazy(() => import('./routes/_account.lazy').then((d) => d.Route))
 
 const AccountIndexRoute = AccountIndexImport.update({
+  id: '/',
   path: '/',
   getParentRoute: () => AccountRoute,
 } as any).lazy(() =>
@@ -53,16 +55,19 @@ const AccountIndexRoute = AccountIndexImport.update({
 )
 
 const DevicesSplatRoute = DevicesSplatImport.update({
+  id: '/devices/$',
   path: '/devices/$',
   getParentRoute: () => rootRoute,
 } as any)
 
 const ClientsIdRoute = ClientsIdImport.update({
+  id: '/clients/$id',
   path: '/clients/$id',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/clients.$id.lazy').then((d) => d.Route))
 
 const PasswordRecoveryIndexRoute = PasswordRecoveryIndexImport.update({
+  id: '/password/recovery/',
   path: '/password/recovery/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
@@ -70,6 +75,7 @@ const PasswordRecoveryIndexRoute = PasswordRecoveryIndexImport.update({
 )
 
 const PasswordChangeIndexRoute = PasswordChangeIndexImport.update({
+  id: '/password/change/',
   path: '/password/change/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
@@ -77,6 +83,7 @@ const PasswordChangeIndexRoute = PasswordChangeIndexImport.update({
 )
 
 const AccountSessionsIndexRoute = AccountSessionsIndexImport.update({
+  id: '/sessions/',
   path: '/sessions/',
   getParentRoute: () => AccountRoute,
 } as any).lazy(() =>
@@ -84,6 +91,7 @@ const AccountSessionsIndexRoute = AccountSessionsIndexImport.update({
 )
 
 const PasswordChangeSuccessLazyRoute = PasswordChangeSuccessLazyImport.update({
+  id: '/password/change/success',
   path: '/password/change/success',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
@@ -91,6 +99,7 @@ const PasswordChangeSuccessLazyRoute = PasswordChangeSuccessLazyImport.update({
 )
 
 const EmailsIdVerifyRoute = EmailsIdVerifyImport.update({
+  id: '/emails/$id/verify',
   path: '/emails/$id/verify',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
@@ -98,6 +107,7 @@ const EmailsIdVerifyRoute = EmailsIdVerifyImport.update({
 )
 
 const AccountSessionsBrowsersRoute = AccountSessionsBrowsersImport.update({
+  id: '/sessions/browsers',
   path: '/sessions/browsers',
   getParentRoute: () => AccountRoute,
 } as any).lazy(() =>
@@ -105,6 +115,7 @@ const AccountSessionsBrowsersRoute = AccountSessionsBrowsersImport.update({
 )
 
 const AccountSessionsIdRoute = AccountSessionsIdImport.update({
+  id: '/sessions/$id',
   path: '/sessions/$id',
   getParentRoute: () => AccountRoute,
 } as any).lazy(() =>
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index 9ec8107a4..a34bc9301 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -4,7 +4,11 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Please see LICENSE in the repository root for full details.
 
-import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
+import {
+  Outlet,
+  ScrollRestoration,
+  createRootRouteWithContext,
+} from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import type { Client } from "urql";
 
@@ -16,6 +20,7 @@ export const Route = createRootRouteWithContext<{
 }>()({
   component: () => (
     <>
+      <ScrollRestoration />
       <Outlet />
       {import.meta.env.DEV && <TanStackRouterDevtools />}
     </>
diff --git a/frontend/src/routes/_account.sessions.browsers.lazy.tsx b/frontend/src/routes/_account.sessions.browsers.lazy.tsx
index 7dece96b4..23351fd14 100644
--- a/frontend/src/routes/_account.sessions.browsers.lazy.tsx
+++ b/frontend/src/routes/_account.sessions.browsers.lazy.tsx
@@ -93,6 +93,7 @@ function BrowserSessions(): React.ReactElement {
             disabled={!forwardPage}
             to="/sessions/browsers"
             search={forwardPage || pagination}
+            resetScroll
           >
             {t("common.previous")}
           </ButtonLink>
@@ -106,6 +107,7 @@ function BrowserSessions(): React.ReactElement {
             disabled={!backwardPage}
             to="/sessions/browsers"
             search={backwardPage || pagination}
+            resetScroll
           >
             {t("common.next")}
           </ButtonLink>
diff --git a/frontend/src/routes/_account.sessions.index.lazy.tsx b/frontend/src/routes/_account.sessions.index.lazy.tsx
index 73d45e489..05b4f9fd5 100644
--- a/frontend/src/routes/_account.sessions.index.lazy.tsx
+++ b/frontend/src/routes/_account.sessions.index.lazy.tsx
@@ -112,6 +112,7 @@ function Sessions(): React.ReactElement {
             disabled={!forwardPage}
             to="/sessions"
             search={{ inactive, ...(forwardPage || pagination) }}
+            resetScroll
           >
             {t("common.previous")}
           </ButtonLink>
@@ -125,6 +126,7 @@ function Sessions(): React.ReactElement {
             disabled={!backwardPage}
             to="/sessions"
             search={{ inactive, ...(backwardPage || pagination) }}
+            resetScroll
           >
             {t("common.next")}
           </ButtonLink>