feat(web): fix web routing and adds last route restore

Author: dvcol

src/router/create-router.ts

@@ -53,5 +53,15 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
     }
   });
 
+  const { restoreLastRoute, setLastRoute } = useRouterStore();
+
+  router.afterEach(async to => {
+    await setLastRoute(to);
+  });
+
+  restoreLastRoute().then(async _route => {
+    await router.push(_route?.name ? _route : { name: Route.Progress });
+  });
+
   return router;
 };

src/stores/router.store.ts

@@ -1,6 +1,10 @@
 import { defineStore, storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { storage } from '~/utils/browser/browser-storage.utils';
+
 const parseQuery = (location: Location) => {
   const params = new URLSearchParams(location.href.split('?').at(1)?.replace(/#.*$/, ''));
   if (params.has('code')) {
@@ -14,10 +18,24 @@ const parseQuery = (location: Location) => {
 export const useRouterStore = defineStore('router', () => {
   const initialLocation = ref({ ...window.location });
   const routeParam = ref<Record<string, string> | undefined>(parseQuery(initialLocation.value));
+  const lastRoute = ref<RouteLocationNormalized>();
+
   const setRouteParam = (params?: Record<string, string>) => {
     routeParam.value = params;
   };
 
+  const setLastRoute = (_route: RouteLocationNormalized) => {
+    lastRoute.value = _route;
+    return storage.local.set('app.state.last-route', _route);
+  };
+
+  const restoreLastRoute = async () => {
+    const _route = await storage.local.get<RouteLocationNormalized>('app.state.last-route');
+    if (_route) lastRoute.value = _route;
+    console.info('router-store', 'restored last route', JSON.parse(JSON.stringify(lastRoute.value)));
+    return _route;
+  };
+
   const baseName = ref('');
   const setBaseName = (name: string) => {
     baseName.value = name;
@@ -28,7 +46,7 @@ export const useRouterStore = defineStore('router', () => {
     baseUrl.value = url;
   };
 
-  return { baseName, setBaseName, baseUrl, setBaseUrl, initialLocation, routeParam, setRouteParam };
+  return { baseName, setBaseName, baseUrl, setBaseUrl, initialLocation, routeParam, setRouteParam, lastRoute, setLastRoute, restoreLastRoute };
 });
 
 export const useRouterStoreRefs = () => storeToRefs(useRouterStore());

src/utils/browser/browser.utils.ts

@@ -17,3 +17,9 @@ export const createTab = (options: chrome.tabs.CreateProperties) => (chrome?.tab
  * @see [chrome.runtime.id](https://developer.chrome.com/docs/extensions/reference/runtime/#property-id)
  */
 export const chromeRuntimeId = chrome?.runtime?.id;
+
+/**
+ * The i18n API for the current browser.
+ * @see [chrome.i18n](https://developer.chrome.com/docs/extensions/reference/i18n/)
+ */
+export const chromeI18n = chrome?.i18n;

src/utils/i18n.utils.ts

@@ -3,14 +3,15 @@ import type { Locale } from '~/models/i18n.model';
 import { useI18nStore } from '~/stores/i18n.store';
 import { useRouterStore } from '~/stores/router.store';
 import { useI18nTranslate } from '~/utils/browser/browser-i18n.utils';
+import { chromeI18n } from '~/utils/browser/browser.utils';
 
 /**
  * Setup i18n function to either use chrome i18n resolver or a local store (for web use).
  * @param roots modules names
  * @see chrome.i18n.getMessage
  */
 export const useI18n = (...roots: string[]): ReturnType<typeof useI18nTranslate> => {
-  if (!window?.chrome?.i18n) {
+  if (!chromeI18n) {
     const store = useI18nStore();
     const router = useRouterStore();
 

src/web/init-services.ts

@@ -15,7 +15,7 @@ export const initServices = async () => {
 
   TraktService.listen();
 
-  await syncRestoreAllUsers();
-
   setAppReady(true);
+
+  await syncRestoreAllUsers();
 };