feat(history): adds settings to load history on startup

Author: dvcol

src/components/views/settings/SettingsTabs.vue

@@ -76,7 +76,7 @@ onBeforeMount(() => {
   fetchLists();
 });
 
-const { pageSize: historyPageSize } = useHistoryStoreRefs();
+const { pageSize: historyPageSize, init } = useHistoryStoreRefs();
 const { pageSize: listPageSize } = useListStoreRefs();
 const { pageSize: searchPageSize } = useSearchStoreRefs();
 const { pageSize: ratingPageSize } = useRatingsStoreRefs();
@@ -155,7 +155,12 @@ const container = ref();
     </SettingsFormItem>
 
     <!--  Enable tabs  -->
-    <template v-for="[route, state] of enabledTabs" :key="route">
+    <div
+      v-for="[route, state] of enabledTabs"
+      :key="route"
+      class="tab-group"
+      :class="{ collapsed: !state }"
+    >
       <SettingsFormItem
         :label="i18n(`label_route_${route}`)"
         :warning="
@@ -219,7 +224,21 @@ const container = ref();
           <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
         </NSwitch>
       </SettingsFormItem>
-    </template>
+
+      <!--  History init  -->
+      <SettingsFormItem
+        v-if="route === Route.History"
+        :label="i18n('label_history_init')"
+        :class="{ show: state }"
+        class="hidden-form-item"
+        :warning="init ? i18n('label_init_warning') : undefined"
+      >
+        <NSwitch v-model:value="init" class="form-switch">
+          <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+          <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+        </NSwitch>
+      </SettingsFormItem>
+    </div>
 
     <!--  Enable Ratings  -->
     <SettingsFormItem
@@ -309,6 +328,17 @@ const container = ref();
     padding: 0 0.5rem;
     font-size: 0.75rem;
   }
+
+  .tab-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    transition: gap 0.3s var(--n-bezier);
+
+    &.collapsed {
+      gap: 0;
+    }
+  }
 }
 
 .form-select {

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

@@ -102,5 +102,13 @@
   "settings__tabs__label_extended_warning": {
     "message": "This may increase page load times significantly.",
     "description": "Warning message for the 'Fetch extended data' setting"
+  },
+  "settings__tabs__label_history_init": {
+    "message": "Fetch history data on startup",
+    "description": "Label for the 'Fetch history data on startup' setting"
+  },
+  "settings__tabs__label_init_warning": {
+    "message": "This may increase application startup time.",
+    "description": "Warning message for the 'Fetch history data on startup' setting"
   }
 }

src/stores/data/history.store.ts

@@ -12,6 +12,7 @@ import { ErrorService } from '~/services/error.service';
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
+import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { storage } from '~/utils/browser/browser-storage.utils';
 import { debounceLoading, useBelowThreshold, useLoadingPlaceholder, useSearchFilter } from '~/utils/store.utils';
 import { clearProxy } from '~/utils/vue.utils';
@@ -29,9 +30,10 @@ const HistoryStoreConstants = {
 
 type HistoryState = {
   pageSize: number;
+  extended: boolean;
+  init: boolean;
   historyStart?: Date | number;
   historyEnd?: Date | number;
-  extended?: boolean;
 };
 
 export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
@@ -42,6 +44,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
   const historyDictionary = reactive<HistoryDictionary>({});
   const pagination = ref<TraktClientPagination>();
   const extended = ref(false);
+  const init = ref(false);
 
   const searchHistory = ref('');
 
@@ -59,6 +62,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
       historyStart: historyStart.value?.getTime(),
       historyEnd: historyEnd.value?.getTime(),
       extended: extended.value,
+      init: init.value,
     });
 
   const restoreState = async () => {
@@ -68,6 +72,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
     if (restored?.historyStart) historyStart.value = new Date(restored.historyStart);
     if (restored?.historyEnd) historyEnd.value = new Date(restored.historyEnd);
     if (restored?.extended) extended.value = restored.extended;
+    if (restored?.init) init.value = restored.init;
   };
 
   const clearState = () => {
@@ -133,6 +138,7 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
   const getMovieHistory = (id: number) => getHistory(id, 'movie');
   const getEpisodeHistory = (id: number) => getHistory(id, 'episode');
 
+  const { isAuthenticated } = useAuthSettingsStoreRefs();
   const initHistoryStore = async () => {
     await restoreState();
 
@@ -154,6 +160,10 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
         }
       });
     });
+
+    if (!init.value) return;
+    if (!isAuthenticated.value) return;
+    await fetchHistory();
   };
 
   return {
@@ -182,6 +192,14 @@ export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
         saveState().catch(e => Logger.error('Failed to save history extended state', e));
       },
     }),
+    init: computed({
+      get: () => init.value,
+      set: (value: boolean) => {
+        init.value = value;
+        saveState().catch(e => Logger.error('Failed to save history init state', e));
+        if (value) return fetchHistory();
+      },
+    }),
   };
 });