[UX] Remember last url opened in the webview, reopen there

src/frontend/App.tsx

@@ -46,16 +46,17 @@ function App() {
             <Route path="/" element={<Navigate replace to="/library" />} />
             <Route path="/library" element={<Library />} />
             <Route path="login" element={<Login />} />
-            <Route path="epicstore" element={<WebView />} />
-            <Route path="gogstore" element={<WebView />} />
-            <Route path="amazonstore" element={<WebView />} />
+            <Route path="epicstore" element={<WebView store="epic" />} />
+            <Route path="gogstore" element={<WebView store="gog" />} />
+            <Route path="amazonstore" element={<WebView store="amazon" />} />
             <Route path="wiki" element={<WebView />} />
             <Route path="/gamepage">
               <Route path=":runner">
                 <Route path=":appName" element={<GamePage />} />
               </Route>
             </Route>
             <Route path="/store-page" element={<WebView />} />
+            <Route path="/last-url" element={<WebView />} />
             <Route path="loginweb">
               <Route path=":runner" element={<WebView />} />
             </Route>

src/frontend/components/UI/Sidebar/components/SidebarLinks/index.tsx

@@ -48,7 +48,9 @@ export default function SidebarLinks() {
     handleExternalLinkDialog
   } = useContext(ContextProvider)
 
-  const isStore = location.pathname.includes('store')
+  const inWebviewScreen =
+    location.pathname.includes('store') ||
+    location.pathname.includes('last-url')
   const isSettings = location.pathname.includes('settings')
   const isWin = platform === 'win32'
 
@@ -90,6 +92,12 @@ export default function SidebarLinks() {
     defaultStore = '/gogstore'
   }
 
+  // if we have a stored last-url, default to the `/last-url` route
+  const lastStore = localStorage.getItem('last-store')
+  if (lastStore) {
+    defaultStore = lastStore
+  }
+
   return (
     <div className="SidebarLinks Sidebar__section">
       {!loggedIn && (
@@ -142,7 +150,7 @@ export default function SidebarLinks() {
             <span>{t('stores', 'Stores')}</span>
           </>
         </NavLink>
-        {isStore && (
+        {inWebviewScreen && (
           <div className="SidebarSubmenu">
             <NavLink
               data-testid="store"

src/frontend/screens/WebView/index.tsx

@@ -16,7 +16,11 @@ import './index.css'
 import LoginWarning from '../Login/components/LoginWarning'
 import { NileLoginData } from 'common/types/nile'
 
-export default function WebView() {
+interface Props {
+  store?: 'epic' | 'gog' | 'amazon'
+}
+
+export default function WebView({ store }: Props) {
   const { i18n } = useTranslation()
   const { pathname, search } = useLocation()
   const { t } = useTranslation()
@@ -66,6 +70,14 @@ export default function WebView() {
   }
   let startUrl = urls[pathname]
 
+  if (store) {
+    localStorage.setItem('last-store', `/${store}store`)
+    const lastUrl = localStorage.getItem(`last-url-${store}`)
+    if (lastUrl) {
+      startUrl = lastUrl
+    }
+  }
+
   if (pathname.match(/store-page/)) {
     const searchParams = new URLSearchParams(search)
     const queryParam = searchParams.get('store-url')
@@ -212,6 +224,27 @@ export default function WebView() {
     return
   }, [webviewRef.current, preloadPath, amazonLoginData])
 
+  useEffect(() => {
+    const webview = webviewRef.current
+    if (webview && store) {
+      const onNavigate = () => {
+        localStorage.setItem(`last-url-${store}`, webview.getURL())
+      }
+
+      // this one is needed for gog/amazon
+      webview.addEventListener('did-navigate', onNavigate)
+      // this one is needed for epic
+      webview.addEventListener('did-navigate-in-page', onNavigate)
+
+      return () => {
+        webview.removeEventListener('did-navigate', onNavigate)
+        webview.removeEventListener('did-navigate-in-page', onNavigate)
+      }
+    }
+
+    return
+  }, [webviewRef.current, store])
+
   const [showLoginWarningFor, setShowLoginWarningFor] = useState<
     null | 'epic' | 'gog' | 'amazon'
   >(null)