feat(panel): adds list state warning & active list

Author: dvcol

src/components/common/tooltip/ProgressTooltip.vue

@@ -40,6 +40,7 @@ const percentage = computed(() => {
 const remaining = computed(() => {
   if (!progress?.value) return;
   if (!('aired' in progress.value)) return;
+  if (!progress.value.completed) return;
   return progress.value.aired - progress.value.completed;
 });
 
@@ -54,27 +55,33 @@ const i18n = useI18n('common', 'tooltip', 'progress');
 </script>
 
 <template>
-  <NTooltip class="progress-tooltip" :disabled="disabled || !progress" :delay="100">
-    <NFlex v-if="progress && isCount" vertical align="flex-end">
-      <div v-if="'aired' in progress">
-        <span class="metric">{{ progress?.completed ?? '-' }}</span>
-        <span> / </span>
-        <span class="metric">{{ progress?.aired ?? '-' }}</span>
-        <span>&nbsp;</span>
-        <span>{{ i18n('episodes') }}</span>
-      </div>
-      <div v-if="percentage">
-        <span class="metric">{{ percentage }}</span>
-        <span>%</span>
-        <span>&nbsp;</span>
-        <span>{{ i18n(type) }}</span>
-      </div>
-      <div v-if="remaining">
-        <span class="metric">{{ remaining }}</span>
-        <span>&nbsp;</span>
-        <span>{{ i18n('remaining') }}</span>
-      </div>
-    </NFlex>
+  <NTooltip
+    class="progress-tooltip"
+    :disabled="disabled || (!$slots.label && !progress)"
+    :delay="100"
+  >
+    <slot name="label">
+      <NFlex v-if="progress && isCount" vertical align="flex-end">
+        <div v-if="'aired' in progress">
+          <span class="metric">{{ progress?.completed ?? '-' }}</span>
+          <span> / </span>
+          <span class="metric">{{ progress?.aired ?? '-' }}</span>
+          <span>&nbsp;</span>
+          <span>{{ i18n('episodes') }}</span>
+        </div>
+        <div>
+          <span class="metric">{{ percentage }}</span>
+          <span>%</span>
+          <span>&nbsp;</span>
+          <span>{{ i18n(type) }}</span>
+        </div>
+        <div v-if="remaining">
+          <span class="metric">{{ remaining }}</span>
+          <span>&nbsp;</span>
+          <span>{{ i18n('remaining') }}</span>
+        </div>
+      </NFlex>
+    </slot>
     <template #trigger>
       <slot />
     </template>

src/components/views/panel/MoviePanel.vue

@@ -11,6 +11,7 @@ import MoviePanelOverview from '~/components/views/panel/MoviePanelOverview.vue'
 import PanelPoster from '~/components/views/panel/PanelPoster.vue';
 
 import { ResolveExternalLinks } from '~/settings/external.links';
+import { useListsStoreRefs, useListStore } from '~/stores/data/list.store';
 import { useMovieStore, useMovieStoreRefs } from '~/stores/data/movie.store';
 import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils';
@@ -67,6 +68,21 @@ onUnmounted(() => {
   movie.value = undefined;
 });
 
+const { lists } = useListsStoreRefs();
+const { isListLoading, isItemInList } = useListStore();
+
+const listLoading = computed(() => {
+  if (!movieId?.value) return;
+  return isListLoading(movieId.value).value;
+});
+
+const activeLists = computed(() => {
+  if (!movieId?.value) return;
+  return lists.value
+    ?.filter(list => isItemInList(list.id, movieId.value).value)
+    .map(list => list.id);
+});
+
 const i18n = useI18n('movie', 'panel');
 
 const title = computed(() => {
@@ -108,6 +124,8 @@ const { openTab } = useExtensionSettingsStore();
       :watched-loading="loadingWatched"
       :collected="collected"
       :collected-loading="loadingCollected"
+      :active-loading="listLoading"
+      :active-lists="activeLists"
     />
 
     <MoviePanelOverview :movie="movie" />

src/components/views/panel/MoviePanelButtons.vue

@@ -100,11 +100,20 @@ onMounted(() => {
           multiple: true,
           scrollable: true,
         }"
+        :tooltip="{
+          delay: 500,
+        }"
         :icon="activeLists?.length ? IconCheckedList : IconListEmpty"
         :filled="!!activeLists?.length"
         :disabled="listsLoading"
         type="warning"
       >
+        <template #tooltip>
+          <NFlex vertical size="small" align="center" justify="center">
+            <div>{{ i18n('list_de_sync', 'common', 'tooltip') }}</div>
+            <div>{{ i18n('list_click_to_refresh', 'common', 'tooltip') }}</div>
+          </NFlex>
+        </template>
         {{ i18n(`label__list__${ activeLists?.length ? 'update' : 'add' }`) }}
       </PanelButtonProgress>
     </NFlex>

src/components/views/panel/PanelButtonProgress.vue

@@ -19,7 +19,6 @@ import type {
 } from '~/models/list-scroll.model';
 
 import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
-import { useI18n } from '~/utils';
 
 const props = defineProps({
   select: {
@@ -76,8 +75,6 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
   option.label?.toString(),
 ];
 
-const i18n = useI18n('panel', 'buttons');
-
 const root = ref();
 const trigger = ref();
 </script>
@@ -101,6 +98,9 @@ const trigger = ref();
       }"
       v-bind="tooltip"
     >
+      <template v-if="$slots.tooltip" #label>
+        <slot name="tooltip" />
+      </template>
       <NPopselect
         :style="{
           '--custom-bg-color': `var(--bg-color-${type}-80)`,

src/components/views/panel/ShowPanel.vue

@@ -15,6 +15,7 @@ import ShowPanelDetails from '~/components/views/panel/ShowPanelDetails.vue';
 import ShowPanelOverview from '~/components/views/panel/ShowPanelOverview.vue';
 import ShowPanelPicker from '~/components/views/panel/ShowPanelPicker.vue';
 import { ResolveExternalLinks } from '~/settings/external.links';
+import { useListsStoreRefs, useListStore } from '~/stores/data/list.store';
 import { type ShowSeasons, useShowStore } from '~/stores/data/show.store';
 import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils';
@@ -132,6 +133,21 @@ const collectionProgressEntity = computed(() => {
   return collectionProgress.value;
 });
 
+const { lists } = useListsStoreRefs();
+const { isListLoading, isItemInList } = useListStore();
+
+const listLoading = computed(() => {
+  if (!showId?.value) return;
+  return isListLoading(showId.value).value;
+});
+
+const activeLists = computed(() => {
+  if (!showId?.value) return;
+  return lists.value
+    ?.filter(list => isItemInList(list.id, showId.value).value)
+    .map(list => list.id);
+});
+
 const title = computed(() => {
   if (!show.value?.title) return;
   return deCapitalise(show.value.title);
@@ -245,13 +261,16 @@ const { openTab } = useExtensionSettingsStore();
       :watched-loading="watchedLoading"
       :collection-progress="collectionProgressEntity"
       :collection-loading="collectionLoading"
+      :active-loading="listLoading"
+      :active-lists="activeLists"
     />
 
     <ShowPanelPicker
       :mode="panelType"
       :seasons="seasons"
       :episodes="episodes"
       :progress="watchedProgress"
+      :collection="collectionProgress"
     />
 
     <ShowPanelOverview

src/components/views/panel/ShowPanelButtons.vue

@@ -143,11 +143,20 @@ onMounted(() => {
           multiple: true,
           scrollable: true,
         }"
+        :tooltip="{
+          delay: 500,
+        }"
         :icon="activeLists?.length ? IconCheckedList : IconListEmpty"
         :filled="!!activeLists?.length"
         :disabled="listsLoading"
         type="warning"
       >
+        <template #tooltip>
+          <NFlex vertical size="small" align="center" justify="center">
+            <div>{{ i18n('list_de_sync', 'common', 'tooltip') }}</div>
+            <div>{{ i18n('list_click_to_refresh', 'common', 'tooltip') }}</div>
+          </NFlex>
+        </template>
         {{ i18n(`label__list__${ activeLists?.length ? 'update' : 'add' }`) }}
       </PanelButtonProgress>
     </NFlex>

src/components/views/panel/ShowPanelPicker.vue

@@ -30,9 +30,13 @@ const props = defineProps({
     type: Object as PropType<ShowProgress>,
     required: false,
   },
+  collection: {
+    type: Object as PropType<ShowProgress>,
+    required: false,
+  },
 });
 
-const { seasons, episodes, progress } = toRefs(props);
+const { seasons, episodes, progress, collection } = toRefs(props);
 
 const { meta } = useRoute();
 
@@ -44,6 +48,7 @@ const seasonsLinks = computed(() => {
       number,
       link: { name: `${meta.base}-season`, params: { seasonNumber: _number } },
       finished: progress?.value?.seasons?.find(s => s.number === number)?.finished,
+      collected: collection?.value?.seasons?.find(s => s.number === number)?.finished,
     };
   });
 });
@@ -60,6 +65,9 @@ const episodeLinks = computed(() => {
     finished: progress?.value?.seasons
       ?.find(s => s.number === _episode.season)
       ?.episodes?.find(e => e.number === _episode.number)?.completed,
+    collected: collection?.value?.seasons
+      ?.find(s => s.number === _episode.season)
+      ?.episodes?.find(e => e.number === _episode.number)?.completed,
   }));
 });
 
@@ -74,10 +82,10 @@ const i18n = useI18n('panel', 'picker');
       <NFlex class="numbers" size="small">
         <template v-if="seasonsLinks?.length">
           <ButtonLink
-            v-for="{ link, number, finished } in seasonsLinks"
+            v-for="{ link, number, finished, collected } in seasonsLinks"
             :key="`season-${number}`"
             :link="{ to: link }"
-            :button="{ type: finished ? 'primary' : undefined }"
+            :button="{ type: finished ? 'primary' : collected ? 'info' : undefined }"
           >
             {{ number }}
           </ButtonLink>
@@ -93,11 +101,11 @@ const i18n = useI18n('panel', 'picker');
       <NFlex class="numbers episodes" size="small">
         <template v-if="episodeLinks?.length">
           <ButtonLink
-            v-for="{ link, number, finished } in episodeLinks"
+            v-for="{ link, number, finished, collected } in episodeLinks"
             :key="`episode-${ number }`"
             v-slot="{ isActive }"
             :link="{ to: link }"
-            :button="{ type: finished ? 'primary' : undefined }"
+            :button="{ type: finished ? 'primary' : collected ? 'info' : undefined }"
             class="link"
           >
             <span class="label" :class="{ active: isActive }">{{ number }}</span>

src/i18n/en/common/tooltip.json

@@ -34,5 +34,13 @@
   "common__tooltip__open_season_in_trakt": {
     "message": "Open season in Trakt.tv",
     "description": "Label for opening a trakt.tv season link in a new tab."
+  },
+  "common__tooltip__list_de_sync": {
+    "message": "List state might be de-synchronised.",
+    "description": "Warning message that the list state might be de-synchronised."
+  },
+  "common__tooltip__list_click_to_refresh": {
+    "message": "Click un-checked list to refresh.",
+    "description": "Label for a link that refreshes the list state."
   }
 }

src/stores/data/list.store.ts

@@ -1,5 +1,5 @@
 import { defineStore, storeToRefs } from 'pinia';
-import { ref, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 
 import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 
@@ -168,6 +168,9 @@ export const useListsStore = defineStore('data.lists', () => {
 
 export const useListsStoreRefs = () => storeToRefs(useListsStore());
 
+type ListDictionary = Record<string, Record<string, boolean>>;
+type ListDictionaryLoading = Record<string, boolean>;
+
 export const useListStore = defineStore('data.list', () => {
   const firstLoad = ref(true);
   const loading = ref(true);
@@ -178,6 +181,9 @@ export const useListStore = defineStore('data.list', () => {
   const searchList = ref('');
   const threshold = ref(10);
 
+  const listDictionary = reactive<ListDictionary>({});
+  const listDictionaryLoading = reactive<ListDictionaryLoading>({});
+
   const saveState = async () => storage.local.set('data.list.page-size', pageSize.value);
   const restoreState = async () => {
     const restored = await storage.local.get<number>('data.list.page-size');
@@ -189,6 +195,23 @@ export const useListStore = defineStore('data.list', () => {
     listItems.value = [];
     pagination.value = undefined;
     searchList.value = '';
+
+    Object.assign(listDictionary, {});
+    Object.assign(listDictionaryLoading, {});
+  };
+
+  const addToDictionary = (list: ListEntity, item: AnyList) => {
+    if (![ListType.List, ListType.Watchlist].map(String).includes(list.type)) return;
+    if (!listDictionary[list.id]) listDictionary[list.id] = {};
+    if ('movie' in item && item.movie?.ids?.trakt) {
+      listDictionary[list.id][item.movie.ids.trakt] = true;
+    } else if ('show' in item && item.show?.ids?.trakt) {
+      listDictionary[list.id][item.show.ids.trakt] = true;
+    } else if ('season' in item && item.season?.ids?.trakt) {
+      listDictionary[list.id][item.season.ids.trakt] = true;
+    } else if ('episode' in item && item.episode?.ids?.trakt) {
+      listDictionary[list.id][item.episode.ids.trakt] = true;
+    }
   };
 
   const { activeList } = useListsStoreRefs();
@@ -212,6 +235,7 @@ export const useListStore = defineStore('data.list', () => {
 
     console.info('Fetching List', list);
     loading.value = true;
+    listDictionaryLoading[list.id] = true;
     const timeout = debounceLoading(listItems, loadingPlaceholder, !page);
     try {
       const query = {
@@ -238,6 +262,7 @@ export const useListStore = defineStore('data.list', () => {
         throw new Error('Invalid list type');
       }
       const newData = response.data.map((item, index) => {
+        addToDictionary(list, item as AnyList);
         if ('id' in item) return item;
         return { ...item, id: `${page}-${index}` };
       });
@@ -251,9 +276,13 @@ export const useListStore = defineStore('data.list', () => {
     } finally {
       clearTimeout(timeout);
       loading.value = false;
+      listDictionaryLoading[list.id] = false;
     }
   };
 
+  const isListLoading = (listId: ListEntity['id']) => computed(() => listDictionaryLoading[listId]);
+  const isItemInList = (listId: ListEntity['id'], itemId: string | number) => computed(() => listDictionary[listId]?.[itemId]);
+
   const initListStore = async () => {
     await restoreState();
 
@@ -281,6 +310,8 @@ export const useListStore = defineStore('data.list', () => {
     fetchListItems,
     filteredListItems,
     initListStore,
+    isListLoading,
+    isItemInList,
   };
 });