fix(pagination): creates constant and fix settings page sizes

Author: dvcol

src/components/views/settings/SettingsExport.vue

@@ -13,6 +13,7 @@ import IconDownload from '~/components/icons/IconDownload.vue';
 import IconLoadingDots from '~/components/icons/IconLoadingDots.vue';
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 
+import { PageSize } from '~/models/page-size.model';
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
@@ -113,7 +114,7 @@ const fetchData = (type: ListTypes, name: string, entity?: ListEntity) => {
           id: user.value,
           list_id: entity.id.toString(),
           extended: TraktApiExtended.Full,
-          pagination: { limit: 1000 },
+          pagination: { limit: PageSize.p1000 },
         },
         writer,
       });

src/components/views/settings/SettingsTabs.vue

@@ -5,7 +5,7 @@ import { NIcon, NSelect, NSwitch, type SelectOption } from 'naive-ui';
 import { type Component, computed, h, onBeforeMount, ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
-import { pageSizeOptions } from '~/models/page-size.model';
+import { pageSizeOptions, pageSizeOptionsWithZero } from '~/models/page-size.model';
 import { ProgressType } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
 import { useCalendarStoreRefs } from '~/stores/data/calendar.store';
@@ -17,6 +17,7 @@ import {
   useListsStoreRefs,
   useListStoreRefs,
 } from '~/stores/data/list.store';
+import { useRatingsStoreRefs } from '~/stores/data/ratings.store';
 import { useSearchStoreRefs } from '~/stores/data/search.store';
 import {
   useExtensionSettingsStore,
@@ -78,6 +79,13 @@ onBeforeMount(() => {
 const { pageSize: historyPageSize } = useHistoryStoreRefs();
 const { pageSize: listPageSize } = useListStoreRefs();
 const { pageSize: searchPageSize } = useSearchStoreRefs();
+const { pageSize: ratingPageSize } = useRatingsStoreRefs();
+
+const pageSizeLoadListWarning = computed(() => {
+  if (!loadLists.value.length) return i18n('label_load_lists_warning');
+  if (!loadListsPageSize.value) return i18n('label_page_size_warning');
+  return undefined;
+});
 
 const tabsOptions = computed(() =>
   enabledTabs.value.map(([route, state]) => ({
@@ -146,17 +154,6 @@ const container = ref();
       </NSwitch>
     </SettingsFormItem>
 
-    <!--  Enable Ratings  -->
-    <SettingsFormItem
-      :label="i18n('label_enable_ratings')"
-      :warning="enableRatings ? i18n('label_enable_ratings_warning') : undefined"
-    >
-      <NSwitch v-model:value="enableRatings" class="form-switch">
-        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
-        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
-      </NSwitch>
-    </SettingsFormItem>
-
     <!--  Enable tabs  -->
     <template v-for="[route, state] of enabledTabs" :key="route">
       <SettingsFormItem
@@ -224,17 +221,32 @@ const container = ref();
       </SettingsFormItem>
     </template>
 
-    <!--  Page Size  -->
-    <SettingsFormItem :label="i18n('label_load_lists_page_size')">
+    <!--  Enable Ratings  -->
+    <SettingsFormItem
+      :label="i18n('label_enable_ratings')"
+      :warning="enableRatings ? i18n('label_enable_ratings_warning') : undefined"
+    >
+      <NSwitch v-model:value="enableRatings" class="form-switch">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+
+    <!--  Rating Page Sizes  -->
+    <SettingsFormItem
+      :label="i18n('label_ratings_page_size')"
+      :warning="!ratingPageSize ? i18n('label_page_size_warning') : undefined"
+    >
       <NSelect
-        v-model:value="loadListsPageSize"
-        :disabled="!loadLists.length"
+        v-model:value="ratingPageSize"
+        :disabled="!enableRatings"
         class="form-select"
         :to="container"
-        :options="pageSizeOptions"
+        :options="pageSizeOptionsWithZero"
       />
     </SettingsFormItem>
 
+    <!--  History Page Sizes  -->
     <SettingsFormItem :label="i18n('label_history_page_size')">
       <NSelect
         v-model:value="historyPageSize"
@@ -245,6 +257,7 @@ const container = ref();
       />
     </SettingsFormItem>
 
+    <!--  List Page Sizes  -->
     <SettingsFormItem :label="i18n('label_list_page_size')">
       <NSelect
         v-model:value="listPageSize"
@@ -255,6 +268,21 @@ const container = ref();
       />
     </SettingsFormItem>
 
+    <!--  Load List Page Sizes  -->
+    <SettingsFormItem
+      :label="i18n('label_load_lists_page_size')"
+      :warning="pageSizeLoadListWarning"
+    >
+      <NSelect
+        v-model:value="loadListsPageSize"
+        :disabled="!loadLists.length"
+        class="form-select"
+        :to="container"
+        :options="pageSizeOptionsWithZero"
+      />
+    </SettingsFormItem>
+
+    <!--  Search page size  -->
     <SettingsFormItem :label="i18n('label_search_page_size')">
       <NSelect
         v-model:value="searchPageSize"

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

@@ -59,10 +59,26 @@
     "message": "Lists to load when opening panels",
     "description": "Label for the 'Load lists' setting"
   },
+  "settings__tabs__label_ratings_page_size": {
+    "message": "Ratings page size",
+    "description": "Label for the 'Page size for ratings' setting"
+  },
   "settings__tabs__label_load_lists_page_size": {
-    "message": "Page size for lists",
+    "message": "Panel list page size",
     "description": "Label for the 'Page size for lists' setting"
   },
+  "settings__tabs__label_load_lists_warning": {
+    "message": "No lists found. Please create at least one list to use this feature.",
+    "description": "Label for the 'No lists found' warning"
+  },
+  "settings__tabs__label_page_size_warning": {
+    "message": "An unlimited page size may impact performance.",
+    "description": "Label for the 'An unlimited page size' warning"
+  },
+  "settings__tabs__label_page_size_none": {
+    "message": "None",
+    "description": "Label for the 'None' page size"
+  },
   "settings__tabs__label_progress_type": {
     "message": "Progress type",
     "description": "Label for the 'Progress type' setting"

src/models/page-size.model.ts

@@ -1,9 +1,20 @@
 import type { SelectOption } from 'naive-ui';
 
+export const PageSize: Record<string, number> = {
+  p0: 0,
+  p50: 50,
+  p100: 100,
+  p200: 200,
+  p500: 500,
+  p1000: 1000,
+} as const;
+
 export const pageSizeOptions: SelectOption[] = [
   { label: '50', value: 50 },
   { label: '100', value: 100 },
   { label: '200', value: 200 },
   { label: '500', value: 500 },
   { label: '1000', value: 1000 },
-];
+] as const;
+
+export const pageSizeOptionsWithZero: SelectOption[] = [{ label: '0', value: 0 }, ...pageSizeOptions] as const;

src/stores/data/history.store.ts

@@ -4,6 +4,7 @@ import { computed, reactive, ref, watch } from 'vue';
 
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
+import { PageSize } from '~/models/page-size.model';
 import { ErrorService } from '~/services/error.service';
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
@@ -26,7 +27,7 @@ type HistoryState = {
 export const useHistoryStore = defineStore(HistoryStoreConstants.Store, () => {
   const firstLoad = ref(true);
   const loading = ref(true);
-  const pageSize = ref(100);
+  const pageSize = ref(PageSize.p100);
   const history = ref<TraktHistory[]>([]);
   const pagination = ref<TraktClientPagination>();
   const extended = ref(false);

src/stores/data/list.store.ts

@@ -20,6 +20,7 @@ import IconGrid from '~/components/icons/IconGrid.vue';
 import IconHeart from '~/components/icons/IconHeart.vue';
 import IconList from '~/components/icons/IconList.vue';
 import { ListScrollItemType } from '~/models/list-scroll.model';
+import { PageSize } from '~/models/page-size.model';
 import { ErrorService } from '~/services/error.service';
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
@@ -230,7 +231,7 @@ const ListStoreConstants = {
 export const useListStore = defineStore(ListStoreConstants.Store, () => {
   const firstLoad = ref(true);
   const loading = ref(true);
-  const pageSize = ref(100);
+  const pageSize = ref(PageSize.p100);
   const pagination = ref<TraktClientPagination>();
 
   const typeLoading = reactive<ListTypeLoading>({});

src/stores/data/ratings.store.ts

@@ -8,12 +8,14 @@ import {
   type TraktSyncRatingValue,
 } from '@dvcol/trakt-http-client/models';
 import { defineStore, storeToRefs } from 'pinia';
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
+import { PageSize } from '~/models/page-size.model';
 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 { storage } from '~/utils/browser/browser-storage.utils';
 import { useI18n } from '~/utils/i18n.utils';
 import { ErrorCount, type ErrorDictionary, shouldRetry } from '~/utils/retry.utils';
 
@@ -62,6 +64,10 @@ const createRatings = <T extends 'movie' | 'show' | 'season' | 'episode'>(
   } as never;
 };
 
+type RatingsState = {
+  pageSize: number;
+};
+
 const RatingsStoreConstants = {
   Store: 'data.ratings',
 } as const;
@@ -71,13 +77,22 @@ export const useRatingsStore = defineStore(RatingsStoreConstants.Store, () => {
   const loading = reactive<RatingsLoadingDictionary>({});
   const errors = reactive<ErrorDictionary>({});
 
-  const pageSize = ref(500);
+  const pageSize = ref(PageSize.p500);
   const paginations = reactive<RatingsPaginationDictionary>({});
 
   ErrorService.registerDictionary('ratings', errors);
 
   const i18n = useI18n('rating');
 
+  const saveState = async () =>
+    storage.local.set<RatingsState>(RatingsStoreConstants.Store, {
+      pageSize: pageSize.value,
+    });
+  const restoreState = async () => {
+    const restored = await storage.local.get<RatingsState>(RatingsStoreConstants.Store);
+    if (restored?.pageSize) pageSize.value = restored.pageSize;
+  };
+
   const clearState = () => {
     clearProxy(ratings);
     clearProxy(loading);
@@ -227,14 +242,26 @@ export const useRatingsStore = defineStore(RatingsStoreConstants.Store, () => {
     return getRatings(type, id);
   };
 
+  const initListStore = async () => {
+    await restoreState();
+  };
+
   return {
+    pageSize: computed({
+      get: () => pageSize.value,
+      set: (value: number) => {
+        pageSize.value = value;
+        saveState().catch(err => Logger.error('Failed to save ratings settings', { value, err }));
+      },
+    }),
     clearState,
     fetchRatings,
     getLoading,
     getRatings,
     loadRatings,
     addRating,
     removeRating,
+    initListStore,
   };
 });
 

src/stores/data/search.store.ts

@@ -7,7 +7,9 @@ import type { TraktClientPagination, TraktSearch, TraktSearchResult, TraktSearch
 import type { ErrorDictionary } from '~/utils/retry.utils';
 
 import { type ListScrollItem, ListScrollItemType } from '~/models/list-scroll.model';
+import { PageSize } from '~/models/page-size.model';
 import { ErrorService } from '~/services/error.service';
+
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 
@@ -40,7 +42,7 @@ export const useSearchStore = defineStore(SearchStoreConstants.Store, () => {
   const searchErrors = reactive<ErrorDictionary>({});
   ErrorService.registerDictionary('search', searchErrors);
 
-  const pageSize = ref(100);
+  const pageSize = ref(PageSize.p100);
   const pagination = ref<TraktClientPagination>();
 
   const loading = ref(false);

src/stores/settings/extension.store.ts

@@ -2,6 +2,7 @@ import { CacheRetention } from '@dvcol/common-utils/common/cache';
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref, toRaw } from 'vue';
 
+import { PageSize } from '~/models/page-size.model';
 import { ProgressType, type ProgressTypes } from '~/models/progress-type.model';
 import { Route } from '~/models/router.model';
 import { Logger } from '~/services/logger.service';
@@ -55,7 +56,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const restoreRoute = ref<ExtensionSettings['restoreRoute']>(true);
   const restorePanel = ref<ExtensionSettings['restorePanel']>(false);
   const loadLists = ref<ExtensionSettings['loadLists']>([]);
-  const loadListsPageSize = ref<ExtensionSettings['loadListsPageSize']>(500);
+  const loadListsPageSize = ref<ExtensionSettings['loadListsPageSize']>(PageSize.p500);
   const defaultTab = ref<Route>(Route.Calendar);
   const initialized = ref<Promise<boolean>>();
   const progressType = ref<ExtensionSettings['progressType']>(ProgressType.Show);
@@ -158,7 +159,13 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         saveState().catch(err => Logger.error('Failed to save load lists extension settings', { value, err }));
       },
     }),
-    loadListsPageSize,
+    loadListsPageSize: computed({
+      get: () => loadListsPageSize.value,
+      set: (value: number) => {
+        loadListsPageSize.value = value;
+        saveState().catch(err => Logger.error('Failed to save load lists page size extension settings', { value, err }));
+      },
+    }),
     toggleTab,
     routeDictionary,
     defaultTab: computed({

src/utils/trakt-service.utils.ts

@@ -12,10 +12,12 @@ import { reactive, ref, type Ref } from 'vue';
 import type { RecursiveRecord } from '@dvcol/common-utils/common';
 import type { JsonWriterOptions } from '@dvcol/common-utils/common/save';
 
+import { PageSize } from '~/models/page-size.model';
+
 type PaginatedQuery = TraktApiParamsExtended & TraktApiParamsPagination;
 export const paginatedWriteJson = async <Q extends PaginatedQuery = PaginatedQuery, T extends RecursiveRecord = RecursiveRecord>(
   fetch: (query: Q) => Promise<TraktApiResponse<T>>,
-  query: Q = { extended: TraktApiExtended.Full, pagination: { limit: 1000 } } as Q,
+  query: Q = { extended: TraktApiExtended.Full, pagination: { limit: PageSize.p1000 } } as Q,
   writerOptions?: JsonWriterOptions,
   cancel?: Ref<boolean>,
   pagination?: Partial<TraktClientPagination>,
@@ -46,7 +48,7 @@ export const paginatedWriteJson = async <Q extends PaginatedQuery = PaginatedQue
 export type CancellableWritePromise<T> = Promise<T> & { cancel: () => Promise<T>; pagination: Partial<TraktClientPagination> };
 export const cancellablePaginatedWriteJson = <Q extends PaginatedQuery = PaginatedQuery, T extends RecursiveRecord = RecursiveRecord>(
   fetch: (query: Q) => Promise<TraktApiResponse<T>>,
-  query: Q = { extended: TraktApiExtended.Full, pagination: { limit: 1000 } } as Q,
+  query: Q = { extended: TraktApiExtended.Full, pagination: { limit: PageSize.p1000 } } as Q,
   writerOptions?: JsonWriterOptions & { separator?: string },
 ): CancellableWritePromise<FileSystemFileHandle> => {
   const cancel = ref(false);