Remember scroll position on refresh

7 files changed, 53 insertions, 7 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 0950db76a5..ded94d405b 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -43,7 +43,12 @@ import {
 import { messages, relayLocations } from '../shared/gettext';
 import { SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
 import { ITranslations, MacOsScrollbarVisibility } from '../shared/ipc-schema';
-import { IChangelog, ICurrentAppVersionInfo, IHistoryObject } from '../shared/ipc-types';
+import {
+  IChangelog,
+  ICurrentAppVersionInfo,
+  IHistoryObject,
+  ScrollPositions,
+} from '../shared/ipc-types';
 import log, { ConsoleOutput, Logger } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
 import {
@@ -253,6 +258,7 @@ class ApplicationMain {
   private changelog?: IChangelog;
 
   private navigationHistory?: IHistoryObject;
+  private scrollPositions: ScrollPositions = {};
 
   public run() {
     // Remove window animations to combat window flickering when opening window. Can be removed when
@@ -1276,6 +1282,7 @@ class ApplicationMain {
       macOsScrollbarVisibility: this.macOsScrollbarVisibility,
       changelog: this.changelog ?? [],
       navigationHistory: this.navigationHistory,
+      scrollPositions: this.scrollPositions,
     }));
 
     IpcMainEventChannel.settings.handleSetAllowLan((allowLan: boolean) =>
@@ -1492,6 +1499,9 @@ class ApplicationMain {
     IpcMainEventChannel.navigation.handleSetHistory((history) => {
       this.navigationHistory = history;
     });
+    IpcMainEventChannel.navigation.handleSetScrollPositions((scrollPositions) => {
+      this.scrollPositions = scrollPositions;
+    });
 
     if (windowsSplitTunneling) {
       this.guiSettings.browsedForSplitTunnelingApplications.forEach(
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 0d9221c51f..97a6f6a310 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -25,7 +25,12 @@ import {
 import { messages, relayLocations } from '../shared/gettext';
 import { IGuiSettingsState, SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
 import { IRelayListPair, LaunchApplicationResult } from '../shared/ipc-schema';
-import { IChangelog, ICurrentAppVersionInfo, IHistoryObject } from '../shared/ipc-types';
+import {
+  IChangelog,
+  ICurrentAppVersionInfo,
+  IHistoryObject,
+  ScrollPositions,
+} from '../shared/ipc-types';
 import log, { ConsoleOutput } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
 import { Scheduler } from '../shared/scheduler';
@@ -248,6 +253,8 @@ export default class AppRenderer {
 
     void this.updateLocation();
 
+    this.reduxActions.userInterface.setScrollPositions(initialState.scrollPositions);
+
     if (initialState.navigationHistory) {
       this.history = History.fromSavedHistory(initialState.navigationHistory);
     } else {
@@ -567,6 +574,10 @@ export default class AppRenderer {
     IpcRendererEventChannel.navigation.setHistory(history);
   }
 
+  public setScrollPositions(scrollPositions: ScrollPositions) {
+    IpcRendererEventChannel.navigation.setScrollPositions(scrollPositions);
+  }
+
   // Make sure that the content height is correct and log if it isn't. This is mostly for debugging
   // purposes since there's a bug in Electron that causes the app height to be another value than
   // the one we have set.
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 2628f484eb..02de9fdb6e 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs } from '../lib/utilityHooks';
@@ -114,18 +115,20 @@ export const NavigationScrollbars = React.forwardRef(function NavigationScrollba
 ) {
   const history = useHistory();
   const { onScroll } = useContext(NavigationScrollContext);
+  const { setScrollPositions } = useAppContext();
 
   const ref = useRef<CustomScrollbarsRef>();
   const combinedRefs = useCombinedRefs(forwardedRef, ref);
 
   const { addScrollPosition, removeScrollPosition } = useActions(userInterface);
-  const scrollPosition = useSelector(
-    (state) => state.userInterface.scrollPosition[history.location.pathname],
-  );
+  const scrollPositions = useSelector((state) => state.userInterface.scrollPosition);
+
+  useEffect(() => setScrollPositions(scrollPositions), [scrollPositions]);
 
   useLayoutEffect(() => {
     const path = history.location.pathname;
 
+    const scrollPosition = scrollPositions[history.location.pathname];
     if (history.action === 'POP' && scrollPosition) {
       ref.current?.scrollTo(...scrollPosition);
       removeScrollPosition(path);
diff --git a/gui/src/renderer/redux/userinterface/actions.ts b/gui/src/renderer/redux/userinterface/actions.ts
index ce0cd5401b..cc8929934d 100644
--- a/gui/src/renderer/redux/userinterface/actions.ts
+++ b/gui/src/renderer/redux/userinterface/actions.ts
@@ -1,5 +1,5 @@
 import { MacOsScrollbarVisibility } from '../../../shared/ipc-schema';
-import { IChangelog } from '../../../shared/ipc-types';
+import { IChangelog, ScrollPositions } from '../../../shared/ipc-types';
 
 export interface IUpdateLocaleAction {
   type: 'UPDATE_LOCALE';
@@ -20,6 +20,11 @@ export interface ISetWindowFocusedAction {
   focused: boolean;
 }
 
+export interface ISetScrollPositions {
+  type: 'SET_SCROLL_POSITIONS';
+  scrollPositions: ScrollPositions;
+}
+
 export interface IAddScrollPosition {
   type: 'ADD_SCROLL_POSITION';
   path: string;
@@ -56,6 +61,7 @@ export type UserInterfaceAction =
   | IUpdateWindowArrowPositionAction
   | IUpdateConnectionInfoOpenAction
   | ISetWindowFocusedAction
+  | ISetScrollPositions
   | IAddScrollPosition
   | IRemoveScrollPosition
   | ISetMacOsScrollbarVisibility
@@ -90,6 +96,13 @@ function setWindowFocused(focused: boolean): ISetWindowFocusedAction {
   };
 }
 
+function setScrollPositions(scrollPositions: ScrollPositions): ISetScrollPositions {
+  return {
+    type: 'SET_SCROLL_POSITIONS',
+    scrollPositions,
+  };
+}
+
 function addScrollPosition(path: string, scrollPosition: [number, number]): IAddScrollPosition {
   return {
     type: 'ADD_SCROLL_POSITION',
@@ -140,6 +153,7 @@ export default {
   updateWindowArrowPosition,
   toggleConnectionPanel,
   setWindowFocused,
+  setScrollPositions,
   addScrollPosition,
   removeScrollPosition,
   setMacOsScrollbarVisibility,
diff --git a/gui/src/renderer/redux/userinterface/reducers.ts b/gui/src/renderer/redux/userinterface/reducers.ts
index ca470a8cba..1850d553ab 100644
--- a/gui/src/renderer/redux/userinterface/reducers.ts
+++ b/gui/src/renderer/redux/userinterface/reducers.ts
@@ -42,6 +42,9 @@ export default function (
     case 'SET_WINDOW_FOCUSED':
       return { ...state, windowFocused: action.focused };
 
+    case 'SET_SCROLL_POSITIONS':
+      return { ...state, scrollPosition: action.scrollPositions };
+
     case 'ADD_SCROLL_POSITION':
       return {
         ...state,
diff --git a/gui/src/shared/ipc-schema.ts b/gui/src/shared/ipc-schema.ts
index 3d08b34f48..e09d552c25 100644
--- a/gui/src/shared/ipc-schema.ts
+++ b/gui/src/shared/ipc-schema.ts
@@ -32,6 +32,7 @@ import {
   ICurrentAppVersionInfo,
   IHistoryObject,
   IWindowShapeParameters,
+  ScrollPositions,
 } from './ipc-types';
 
 export interface ITranslations {
@@ -72,6 +73,7 @@ export interface IAppStateSnapshot {
   macOsScrollbarVisibility?: MacOsScrollbarVisibility;
   changelog: IChangelog;
   navigationHistory?: IHistoryObject;
+  scrollPositions: ScrollPositions;
 }
 
 // The different types of requests are:
@@ -125,6 +127,7 @@ export const ipcSchema = {
   navigation: {
     reset: notifyRenderer<void>(),
     setHistory: send<IHistoryObject>(),
+    setScrollPositions: send<ScrollPositions>(),
   },
   daemon: {
     isPerformingPostUpgrade: notifyRenderer<boolean>(),
diff --git a/gui/src/shared/ipc-types.ts b/gui/src/shared/ipc-types.ts
index 27a80fda93..2b42f42b0e 100644
--- a/gui/src/shared/ipc-types.ts
+++ b/gui/src/shared/ipc-types.ts
@@ -18,3 +18,5 @@ export interface IHistoryObject {
   index: number;
   lastAction: Action;
 }
+
+export type ScrollPositions = Record<string, [number, number]>;