feat(router): adds default tab selector and fix restore toggles

Author: dvcol

src/components/views/settings/SettingsTabs.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { NSelect, NSwitch } from 'naive-ui';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { pageSizeOptions } from '~/models/page-size.model';
@@ -17,18 +17,41 @@ import { useI18n } from '~/utils';
 
 const i18n = useI18n('settings', 'tabs');
 
-const { enabledTabs, restoreRoute, routeDictionary } = useExtensionSettingsStoreRefs();
+const { enabledTabs, restoreRoute, routeDictionary, restorePanel, defaultTab } =
+  useExtensionSettingsStoreRefs();
 const { toggleTab } = useExtensionSettingsStore();
 
 const { pageSize: historyPageSize } = useHistoryStoreRefs();
 const { pageSize: listPageSize } = useListStoreRefs();
 const { pageSize: searchPageSize } = useSearchStoreRefs();
 
+const tabsOptions = computed(() =>
+  enabledTabs.value.map(([route, state]) => ({
+    label: i18n(route, 'route'),
+    value: route,
+    disabled: !state,
+  })),
+);
+
+const disabled = computed(
+  () => enabledTabs.value.filter(([_, state]) => state).length <= 1,
+);
+
 const container = ref();
 </script>
 
 <template>
   <div ref="container" class="tabs-container">
+    <!--  Default tab  -->
+    <SettingsFormItem :label="i18n('label_default_tab')">
+      <NSelect
+        v-model:value="defaultTab"
+        class="default-tab"
+        :to="container"
+        :options="tabsOptions"
+      />
+    </SettingsFormItem>
+
     <!--  Restore tab  -->
     <SettingsFormItem :label="i18n('label_restore_tab')">
       <NSwitch v-model:value="restoreRoute" class="form-switch">
@@ -37,6 +60,14 @@ const container = ref();
       </NSwitch>
     </SettingsFormItem>
 
+    <!--  Restore panel  -->
+    <SettingsFormItem :label="i18n('label_restore_panel')">
+      <NSwitch v-model:value="restorePanel" class="form-switch">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+
     <!--  Enable tabs  -->
     <SettingsFormItem
       v-for="[route, state] of enabledTabs"
@@ -48,7 +79,12 @@ const container = ref();
           : undefined
       "
     >
-      <NSwitch :value="state" class="form-switch" @click="toggleTab(route)">
+      <NSwitch
+        :value="state"
+        class="form-switch"
+        :disabled="state && disabled"
+        @update:value="toggleTab(route)"
+      >
         <template #checked>{{ i18n('on', 'common', 'button') }}</template>
         <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
       </NSwitch>
@@ -106,4 +142,8 @@ const container = ref();
 .form-select {
   min-width: 5.5rem;
 }
+
+.default-tab {
+  min-width: 7rem;
+}
 </style>

src/i18n/en/settings/settings-tabs.json

@@ -1,8 +1,16 @@
 {
+  "settings__tabs__label_default_tab": {
+    "message": "Default tab",
+    "description": "Label for the 'Default tab' setting"
+  },
   "settings__tabs__label_restore_tab": {
     "message": "Restore active tab on startup",
     "description": "Label for the 'Restore active tab on startup' setting"
   },
+  "settings__tabs__label_restore_panel": {
+    "message": "Restore active panel on startup",
+    "description": "Label for the 'Restore active panel on startup' setting"
+  },
   "settings__tabs__label_route_progress": {
     "message": "Enable the progress tab",
     "description": "Label for the 'Enable the progress tab' setting"

src/router/create-router.ts

@@ -1,3 +1,4 @@
+import { watch } from 'vue';
 import { createRouter as createVueRouter, createWebHashHistory, type LocationQueryRaw } from 'vue-router';
 
 import { isLoginAuthResponseSuccess } from '~/models/login/login-auth-response';
@@ -8,28 +9,47 @@ import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useRouterStore, useRouterStoreRefs } from '~/stores/router.store';
 
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
+import { useExtensionSettingsStore, useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { logger } from '~/stores/settings/log.store';
 
 export type RouterOptions = { baseName?: string; baseUrl?: string };
 export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL }: RouterOptions) => {
+  const { restoreRoute, restorePanel, defaultTab } = useExtensionSettingsStoreRefs();
+  const { initExtensionSettingsStore } = useExtensionSettingsStore();
+
   const { setBaseName, setBaseUrl, setRouteParam } = useRouterStore();
   const { routeParam } = useRouterStoreRefs();
 
   setBaseName(baseName);
   setBaseUrl(baseUrl);
 
   const _routes = routes.map(r => ({ ...r, path: `${baseName}${r.path}` }));
-  const _routesWithBase = [
+  const _redirects = [
+    {
+      name: 'root',
+      path: `${baseName}/`,
+      redirect: { name: defaultTab.value },
+    },
     {
+      name: 'root-eager',
       path: `${baseName}/:pathMatch(.*)`,
-      redirect: { name: Route.Calendar },
+      redirect: { name: defaultTab.value },
     },
-    ..._routes,
   ];
 
   const router = createVueRouter({
     history: createWebHashHistory(baseUrl),
-    routes: _routesWithBase,
+    routes: [..._redirects, ..._routes],
+  });
+
+  watch(defaultTab, _default => {
+    _redirects.forEach(r => {
+      router.removeRoute(r.name);
+      router.addRoute({
+        ...r,
+        redirect: { name: _default },
+      });
+    });
   });
 
   const { waitAppReady } = useAppStateStoreRefs();
@@ -66,9 +86,14 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
 
   restoreLastRoute().then(async _route => {
     const isNotLogin = _route?.name && _route?.name !== Route.Login;
-    if (!isNotLogin) await router.push({ name: Route.Calendar });
-    else {
-      if (_route.meta.base) await router.push(_route.meta.base);
+    await initExtensionSettingsStore();
+    if (!isNotLogin || !restoreRoute.value) {
+      await router.push({ name: defaultTab.value });
+    } else {
+      if (_route.meta.base) {
+        await router.push(_route.meta.base);
+        if (!restorePanel.value) return;
+      }
       await router.push(_route);
     }
   });

src/router/routes.ts

@@ -40,10 +40,6 @@ const panelRoutes = (base: Route): RouteRecordRaw[] => [
 ];
 
 export const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    redirect: { name: Route.Calendar },
-  },
   {
     path: `/${Route.Login}`,
     name: Route.Login,

src/stores/settings/extension.store.ts

@@ -34,15 +34,16 @@ type ExtensionSettings = {
   cacheRetention: CacheRetentionState;
   enabledRoutes: RouteDictionary;
   restoreRoute: boolean;
-  progressTab: boolean;
-  logLevel: string;
+  restorePanel: boolean;
 };
 
 export const useExtensionSettingsStore = defineStore('settings.extension', () => {
   const cacheRetention = reactive<CacheRetentionState>(DefaultCacheRetention);
   const routeDictionary = reactive<RouteDictionary>(DefaultRoutes);
   const restoreRoute = ref(true);
-  // todo: use each store value instead in settings page
+  const restorePanel = ref(false);
+  const defaultTab = ref(Route.Calendar);
+  const initialized = ref<Promise<boolean>>();
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
@@ -56,8 +57,9 @@ export const useExtensionSettingsStore = defineStore('settings.extension', () =>
         cacheRetention: toRaw(cacheRetention),
         enabledRoutes: toRaw(routeDictionary),
         restoreRoute: restoreRoute.value,
+        restorePanel: restorePanel.value,
       }),
-    1000,
+    500,
   );
 
   const setRetention = (retention: Partial<CacheRetentionState>, persist = true) => {
@@ -74,25 +76,61 @@ export const useExtensionSettingsStore = defineStore('settings.extension', () =>
     if (restored?.cacheRetention !== undefined) setRetention(restored.cacheRetention, false);
     if (restored?.enabledRoutes !== undefined) Object.assign(routeDictionary, restored.enabledRoutes);
     if (restored?.restoreRoute !== undefined) restoreRoute.value = restored.restoreRoute;
+    if (restored?.restorePanel !== undefined) restorePanel.value = restored.restorePanel;
+  };
+
+  const saveDefaultTab = debounce(() => storage.sync.set('settings.extension.default-tab', defaultTab.value), 500);
+
+  const restoreDefaultTab = async () => {
+    const restored = await storage.sync.get<Route>('settings.extension.default-tab');
+    if (restored) defaultTab.value = restored;
   };
 
   const initExtensionSettingsStore = async () => {
-    await restoreState();
+    if (!initialized.value) initialized.value = Promise.all([restoreState(), restoreDefaultTab()]).then(() => true);
+    return initialized.value;
+  };
+
+  const setDefaultTab = (value?: Route) => {
+    if (!value) return;
+    defaultTab.value = value;
+    saveDefaultTab().catch(err => logger.error('Failed to save default tab in extension settings', { value, err }));
   };
 
   const toggleTab = (tab: Route) => {
     routeDictionary[tab] = !routeDictionary[tab];
-    saveState().catch(err => logger.error('Failed to save extension settings', { tab, err }));
+    if (defaultTab.value === tab && !routeDictionary[tab]) {
+      setDefaultTab((Object.keys(routeDictionary) as Route[]).find(key => routeDictionary[key]));
+    }
+    saveState().catch(err => logger.error('Failed to save enabled tab extension settings', { tab, err }));
   };
 
   return {
     initExtensionSettingsStore,
+    restoreDefaultTab,
     saveState,
     clearState,
-    restoreRoute,
+    restoreRoute: computed({
+      get: () => restoreRoute.value,
+      set: (value: boolean) => {
+        restoreRoute.value = value;
+        saveState().catch(err => logger.error('Failed to save restore route extension settings', { value, err }));
+      },
+    }),
+    restorePanel: computed({
+      get: () => restorePanel.value,
+      set: (value: boolean) => {
+        restorePanel.value = value;
+        saveState().catch(err => logger.error('Failed to save restore panel extension settings', { value, err }));
+      },
+    }),
     toggleTab,
     routeDictionary,
-    enabledTabs: computed(() => Object.entries(routeDictionary).filter(([r]) => r !== Route.Calendar) as [Route, boolean][]),
+    defaultTab: computed({
+      get: () => defaultTab.value,
+      set: setDefaultTab,
+    }),
+    enabledTabs: computed(() => Object.entries(routeDictionary) as [Route, boolean][]),
     enabledRoutes: computed(() =>
       Object.entries(routeDictionary)
         .filter(([, value]) => value)

src/stores/settings/links.store.ts

@@ -74,9 +74,9 @@ export const useLinksStore = defineStore('settings.links', () => {
     clearProxy(linkScopeDictionary);
   };
 
-  const saveState = debounce(() => storage.sync.set('settings.links', { enabled: enabled.value, backgroundLink: backgroundLink.value }), 1000);
-  const saveAlias = debounce(() => storage.sync.set('settings.links.aliases', aliasDictionary), 1000);
-  const saveLinks = debounce(() => storage.sync.set('settings.links.links', linkDictionary), 1000);
+  const saveState = debounce(() => storage.sync.set('settings.links', { enabled: enabled.value, backgroundLink: backgroundLink.value }), 500);
+  const saveAlias = debounce(() => storage.sync.set('settings.links.aliases', aliasDictionary), 500);
+  const saveLinks = debounce(() => storage.sync.set('settings.links.links', linkDictionary), 500);
 
   const addToScope = (scope: CustomLinkScopes, link: CustomLink) => {
     if (!linkScopeDictionary[scope]) linkScopeDictionary[scope] = {};

src/stores/settings/log.store.ts

@@ -22,7 +22,7 @@ export const useLogStore = defineStore('settings.logs', () => {
     logLevel.value = LogLevel.Warn;
   };
 
-  const saveState = debounce(() => storage.sync.set('settings.logs', { logLevel: logLevel.value }), 1000);
+  const saveState = debounce(() => storage.sync.set('settings.logs', { logLevel: logLevel.value }), 500);
 
   const restoreState = async () => {
     const restored = await storage.sync.get<LogSettings>('settings.logs');