feat(list): change caching strategy and adds today indicator

Author: dvcol

src/components/common/list/ListItem.vue

@@ -97,6 +97,10 @@ const nextHasHead = computed(
 );
 const date = computed(() => item?.value?.date?.current);
 
+const isToday = computed(
+  () => date.value?.toLocaleDateString() === new Date().toLocaleDateString(),
+);
+
 const year = new Date().getFullYear();
 const sameYear = computed(() => date.value?.getFullYear() === year);
 const loading = computed(() => item?.value?.loading);
@@ -163,7 +167,7 @@ const onClick = () => emit('onItemClick', { item: item?.value });
         <NFlex
           v-if="!hideDate"
           class="header"
-          :class="{ hover }"
+          :class="{ hover, today: isToday }"
           vertical
           justify="flex-start"
           align="center"
@@ -250,11 +254,15 @@ const onClick = () => emit('onItemClick', { item: item?.value });
     color: var(--n-text-color);
     font-size: 14px;
     border-top: 1px solid var(--border-grey);
+    transition: color 0.2s var(--n-bezier);
+    will-change: color;
+
+    &.today {
+      color: var(--color-warning);
+    }
 
     &.hover {
       color: var(--trakt-red);
-      transition: color 0.2s var(--n-bezier);
-      will-change: color;
     }
 
     .month {

src/components/common/list/ListItemPanel.vue

@@ -80,9 +80,9 @@ const progress = computed<ShowProgress | undefined>(() => {
   if (item?.value?.progress) return item.value?.progress;
   if (item?.value?.progressRef) return item.value?.progressRef.value;
   if (!item?.value?.getProgressQuery) return;
-  const id = item.value?.getProgressQuery();
+  const { id, cacheOptions } = item.value?.getProgressQuery() ?? {};
   if (!id) return;
-  return getShowWatchedProgress(id).value;
+  return getShowWatchedProgress(id, cacheOptions).value;
 });
 
 const innerContainer = ref();

src/components/views/panel/PanelButtonProgress.vue

@@ -162,7 +162,6 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
     </ProgressTooltip>
 
     <NModal
-      v-if="false"
       v-model:show="showPicker"
       :to="root"
       :style="{

src/models/list-scroll.model.ts

@@ -10,6 +10,7 @@ import type { TraktPerson } from '~/models/trakt/trakt-people.model';
 import type { BaseTraktProgress, BaseTraktProgressEpisode, BaseTraktProgressSeason } from '~/models/trakt/trakt-progress.model';
 import type { TraktSeason } from '~/models/trakt/trakt-season.model';
 import type { TraktShow } from '~/models/trakt/trakt-show.model';
+import type { BaseCacheOption } from '~/services/common/base-client';
 
 export type VirtualListRef = VirtualListInst & InstanceType<typeof NVirtualList>;
 export type VirtualListProps = {
@@ -90,7 +91,7 @@ export type ListScrollItem<T = Record<string, any>> = Omit<PosterItem, 'type'> &
 
   progress?: ShowProgress;
   progressRef?: Ref<ShowProgress | undefined>;
-  getProgressQuery?: () => string | number | undefined;
+  getProgressQuery?: () => { id: string | number | undefined; cacheOptions?: BaseCacheOption };
 
   meta?: T;
 

src/services/trakt.service.ts

@@ -19,7 +19,7 @@ import type { TraktWatchlistGetQuery } from '~/models/trakt/trakt-watchlist.mode
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 import type { TvdbApiResponse } from '~/models/tvdb/tvdb-client.model';
 
-import { getCachedFunction, type TypedResponse } from '~/services/common/base-client';
+import { type BaseCacheOption, getCachedFunction, type TypedResponse } from '~/services/common/base-client';
 import { LoadingBarService } from '~/services/loading-bar.service';
 import { tmdbApi } from '~/services/tmdb-client/api/tmdb-api.endpoints';
 import { TmdbClient } from '~/services/tmdb-client/clients/tmdb-client';
@@ -61,7 +61,10 @@ export class TraktService {
 
   static {
     this.caches = {
-      trakt: new ChromeCacheStore<TraktApiResponse>({ prefix: 'trakt-cache' }),
+      trakt: new ChromeCacheStore<TraktApiResponse>({
+        prefix: 'trakt-cache',
+        retention: CacheRetention.Week,
+      }),
       tvdb: new ChromeCacheStore<TvdbApiResponse>({
         prefix: 'tvdb-cache',
         retention: CacheRetention.Year,
@@ -82,6 +85,10 @@ export class TraktService {
     this.caches.tvdb.prefix = `tvdb-cache-${user}`;
   }
 
+  static changeRetention(retention: number) {
+    this.caches.trakt.retention = retention;
+  }
+
   private static async saveAuth(
     auth: SettingsAuth = this.auth,
     prev: SettingsAuth = useAuthSettingsStore().auth,
@@ -314,8 +321,12 @@ export class TraktService {
     },
 
     show: {
-      async watched(showId: string | number) {
-        const response = await TraktService.traktClient.shows.progress.watched.cached({ id: showId, specials: true, count_specials: false });
+      async watched(showId: string | number, cacheOption?: BaseCacheOption) {
+        const response = await TraktService.traktClient.shows.progress.watched.cached(
+          { id: showId, specials: true, count_specials: false },
+          undefined,
+          cacheOption,
+        );
         return response.json() as Promise<TraktWatchedProgress>;
       },
 

src/stores/data/progress.store.ts

@@ -9,6 +9,7 @@ import { type ListScrollItem, type ListScrollSourceItem } from '~/models/list-sc
 import { type ProgressItem } from '~/models/progress.model';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
+import { CacheRetention } from '~/utils/cache.utils';
 import { debounceLoading, useLoadingPlaceholder } from '~/utils/store.utils';
 
 type ProgressListItem = Omit<ListScrollItem, 'posterRef' | 'progressRef'>;
@@ -42,7 +43,12 @@ export const progressToListItem = (progress: ProgressItem, index: number): Progr
     title: getTitle({ show, episode }),
     content: getContent({ show, episode }),
     poster,
-    getProgressQuery: () => show?.ids?.trakt,
+    getProgressQuery: () => ({
+      id: show?.ids?.trakt,
+      cacheOptions: {
+        retention: CacheRetention.Day,
+      },
+    }),
     date: {
       current: new Date(progress.firstAired),
     },

src/stores/data/show.store.ts

@@ -7,6 +7,8 @@ import type { TraktCollectionProgress, TraktWatchedProgress } from '~/models/tra
 import type { TraktSeasonExtended } from '~/models/trakt/trakt-season.model';
 import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
 
+import type { BaseCacheOption } from '~/services/common/base-client';
+
 import { type ShowProgress, ShowProgressType } from '~/models/list-scroll.model';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
@@ -95,7 +97,7 @@ export const useShowStore = defineStore('data.show', () => {
     }
   };
 
-  const fetchShowProgress = async (id: string) => {
+  const fetchShowProgress = async (id: string, cacheOption?: BaseCacheOption) => {
     if (showWatchedProgressLoading[id]) {
       console.warn('Already fetching show progress', id);
       return;
@@ -105,7 +107,7 @@ export const useShowStore = defineStore('data.show', () => {
 
     showWatchedProgressLoading[id] = true;
     try {
-      showsWatchedProgress[id] = await TraktService.progress.show.watched(id);
+      showsWatchedProgress[id] = await TraktService.progress.show.watched(id, cacheOption);
     } catch (e) {
       console.error('Failed to fetch show progress', id);
       throw e;
@@ -234,8 +236,10 @@ export const useShowStore = defineStore('data.show', () => {
     });
 
   const getShowProgressLoading = (id: number | string) => computed(() => showWatchedProgressLoading[id.toString()]);
-  const getShowWatchedProgress = (id: number | string) => {
-    if (!showsWatchedProgress[id.toString()] && !showWatchedProgressLoading[id.toString()]) fetchShowProgress(id.toString()).catch(console.error);
+  const getShowWatchedProgress = (id: number | string, cacheOptions?: BaseCacheOption) => {
+    if (!showsWatchedProgress[id.toString()] && !showWatchedProgressLoading[id.toString()]) {
+      fetchShowProgress(id.toString(), cacheOptions).catch(console.error);
+    }
     return computed(() => {
       const progress = showsWatchedProgress[id.toString()];
       if (!progress) return undefined;

src/styles/base.scss

@@ -15,7 +15,7 @@
   --vt-c-text-light-2: rgb(60 60 60 / 66%);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
-  
+
   /* background color variables */
   --bg-blur: 1px;
   --bg-blur-20: 20px;
@@ -28,7 +28,11 @@
   --bg-black-70: rgba(0 0 0 / 70%);
   --bg-black-80: rgba(0 0 0 / 80%);
   --bg-black-90: rgba(0 0 0 / 90%);
-  --bg-gradient-60-90: linear-gradient(to right, var(--bg-color-60) 5%, var(--bg-color-90));
+  --bg-gradient-60-90: linear-gradient(
+    to right,
+    var(--bg-color-60) 5%,
+    var(--bg-color-90)
+  );
   --bg-red: rgba(255 222 223);
   --bg-red-20: rgba(255 222 223 / 20%);
   --bg-red-30: rgba(255 222 223 / 30%);
@@ -39,7 +43,7 @@
   --bg-color-primary: rgb(24 42 36);
   --bg-color-primary-80: rgba(24 42 36 / 80%);
   --bg-color-info: rgb(22 35 42);
-  --bg-color-info-80:  rgb(22 35 42 / 80%);
+  --bg-color-info-80: rgb(22 35 42 / 80%);
   --bg-color-warning: rgb(43 37 25);
   --bg-color-warning-80: rgb(43 37 25 / 80%);
   --bg-color-error: rgb(45 27 28);
@@ -52,7 +56,7 @@
   --border-grey: rgb(70 70 70);
   --border-white: rgb(255 255 255 / 20%);
   --primary-color: #63e2b7;
-  --primary-color-lighter:  #7fe7c4;
+  --primary-color-lighter: #7fe7c4;
   --primary-color-disabled: #548272;
   --primary-color-dark: color-mix(in srgb, var(--primary-color) 40%, black 60%);
   --primary-color-focus: rgba(99 226 183 / 10%);
@@ -67,10 +71,13 @@
 
   /* trakt.tv brand color */
   --trakt-red: #ed1c24;
-  --trakt-red-dark: #ba080f;
+  --trakt-red-dark: #b7000D;
+  --trakt-red-darker: #80000a;
+  --trakt-red-light:#ff5c62;
+  --trakt-red-lighter: #e98b8b;
 
   /* Transforms */
-  --n-bezier: cubic-bezier(.4, 0, .2, 1);
+  --n-bezier: cubic-bezier(0.4, 0, 0.2, 1);
 
   /* Bow shadows */
   --image-box-shadow: 0 0 20px 9px rgb(255 255 255 / 10%);
@@ -139,4 +146,3 @@
   }
   */
 }
-