feat(tags): rework tags and episode display

Author: dvcol

src/components/common/list/ListItemPanel.vue

@@ -79,10 +79,6 @@ const tags = computed(
       <NEllipsis v-else :line-clamp="2">{{ content }}</NEllipsis>
     </div>
     <NFlex v-if="date || tags?.length" size="medium" class="tags">
-      <template v-if="date">
-        <NSkeleton v-if="loading" text style="width: 6%" />
-        <NTag v-else class="tag meta" size="small"> {{ date }} </NTag>
-      </template>
       <template v-for="tag of tags" :key="tag.label">
         <NSkeleton v-if="loading" text style="width: 6%" />
         <NTag
@@ -91,11 +87,17 @@ const tags = computed(
           :class="{ meta: tag.meta }"
           size="small"
           :type="tag.type"
-          :bordered="tag.bordered ?? true"
+          :bordered="tag.bordered ?? false"
         >
           {{ tag.label }}
         </NTag>
       </template>
+      <template v-if="date">
+        <NSkeleton v-if="loading" text style="width: 6%" />
+        <NTag v-else class="tag" size="small" type="default" :bordered="false">
+          {{ date }}
+        </NTag>
+      </template>
     </NFlex>
   </NFlex>
 </template>

src/components/common/list/use-list-scroll.ts

@@ -7,6 +7,7 @@ import type { TraktClientPagination } from '~/models/trakt/trakt-client.model';
 import type { ImageQuery } from '~/stores/data/image.store';
 
 import { type ListScrollItem, ListScrollItemType, type ListScrollSourceItem, type OnScroll, type OnUpdated } from '~/models/list-scroll.model';
+import { useI18n } from '~/utils';
 
 export type ListScrollSourceItemWithDate<T extends string> = ListScrollSourceItem & Partial<Record<T, string | number | Date>>;
 
@@ -15,8 +16,7 @@ export const getTitle = (media: Pick<ListScrollSourceItem, 'person' | 'movie' |
   if (media.person) return media.person.name;
   if (media.movie) return media.movie.title;
   if (!media.episode) return media.show?.title;
-  const number = media.episode.number?.toString().padStart(2, '0');
-  return `${media.episode.season}x${number} - ${media.episode.title}`;
+  return media.episode.title;
 };
 
 export const getContent = (media: Pick<ListScrollSourceItem, 'movie' | 'episode' | 'show'>): ListScrollItem['content'] => {
@@ -79,6 +79,38 @@ export const getPosterQuery =
     } satisfies ImageQuery;
   };
 
+const i18n = useI18n('common', 'tag');
+export const getTags = (item: Pick<ListScrollSourceItem, 'episode' | 'season'>, type: ListScrollItem['type']): ListScrollItem['tags'] => {
+  const tags: ListScrollItem['tags'] = [];
+  if (type === 'episode' && item.episode) {
+    let premiere: 'season' | 'series' | 'mid_season' | null = null;
+    // let finale: 'season' | 'series' | 'mid_season';
+    if (item.episode.season === 1 && item.episode.number === 1) premiere = 'series';
+    else if (item.episode.number === 1) premiere = 'season';
+
+    if (premiere) {
+      tags.push({
+        label: premiere,
+        i18n: ['calendar', 'tag', 'label', 'premiere'],
+        type: premiere === 'season' ? 'info' : 'primary',
+      });
+    }
+    tags.push({
+      label: `${i18n('season')} ${item.episode.season.toString().padStart(2, '0')} ${i18n('episode')} ${item.episode.number
+        .toString()
+        .padStart(2, '0')}`,
+      type: 'warning',
+    });
+  } else if (type === 'season' && item.season) {
+    tags.push({
+      label: `Season ${item.season.number.toString().padStart(2, '0')}`,
+      type: 'warning',
+    });
+  }
+
+  return tags;
+};
+
 export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D extends string | never = never>(
   items: Ref<T[]>,
   dateFn?: D | ((item: T) => T[D]),
@@ -94,8 +126,11 @@ export const useListScroll = <T extends ListScrollSourceItemWithDate<D>, D exten
       if (!_item.content) _item.content = getContent(item);
       if (!_item.posterRef) _item.posterRef = ref<string | undefined>(undefined);
       if (!_item.getPosterQuery) _item.getPosterQuery = getPosterQuery(item, _item.type);
+      if (!_item.tags) _item.tags = getTags(item, _item.type);
+
       _item.date = getDate(item, array, index, dateFn);
       _item.meta = {
+        source: item,
         ids: {
           movie: item.movie?.ids,
           show: item.show?.ids,

src/i18n/en/common/tag.json

@@ -0,0 +1,10 @@
+{
+  "common__tag__season": {
+    "message": "Season",
+    "description": "The label for the season tag"
+  },
+  "common__tag__episode": {
+    "message": "Episode",
+    "description": "The label for the episode tag"
+  }
+}

src/models/list-scroll.model.ts

@@ -54,7 +54,8 @@ export const ListScrollItemType = {
   placeholder: 'placeholder',
 } as const;
 
-export type ListScrollItem = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- meta is intentionally weakly typed
+export type ListScrollItem<T = Record<string, any>> = {
   id: string | number;
   index: number;
 
@@ -63,11 +64,11 @@ export type ListScrollItem = {
   content?: string;
   tags?: ListScrollItemTag[];
 
-  poster?: ImageStoreMedias;
+  poster?: string;
   posterRef?: Ref<ImageStoreMedias | undefined>;
   getPosterQuery?: () => ImageQuery | undefined;
 
-  meta?: Record<string, unknown>;
+  meta?: T;
 
   loading?: boolean;
   date?: {

src/models/progress.model.ts

@@ -2,7 +2,7 @@ import type { ListScrollItem, ListScrollSourceItem } from '~/models/list-scroll.
 import type { TraktEpisode } from '~/models/trakt/trakt-episode.model';
 import type { TraktShow } from '~/models/trakt/trakt-show.model';
 
-import { getContent, getTitle } from '~/components/common/list/use-list-scroll';
+import { getContent, getTags, getTitle } from '~/components/common/list/use-list-scroll';
 
 export type ProgressItem = {
   episodeId: string;
@@ -55,15 +55,16 @@ export const progressToListItem = (progress: ProgressItem): Omit<ListScrollItem,
       current: new Date(progress.firstAired),
     },
     type: progress.type,
+    tags: getTags({ episode }, progress.type),
     meta: {
+      source: progress,
+      episode,
+      show,
       ids: {
         show: progress.showId ? Number(progress.showId) : undefined,
         season: progress.seasonId ? Number(progress.seasonId) : undefined,
         episode: progress.episodeId ? Number(progress.episodeId) : undefined,
       },
-      show,
-      episode,
-      source: progress,
     },
   };
 };

src/stores/data/calendar.store.ts

@@ -13,9 +13,6 @@ import { useSearchFilter } from '~/utils/store.utils';
 export type CalendarItem = (TraktCalendarShow | TraktCalendarMovie | Record<never, never>) & {
   id: ListScrollItem['id'];
   type?: ListScrollItem['type'];
-  premiere?: 'season' | 'series' | 'mid_season';
-  finale?: 'season' | 'series' | 'mid_season';
-  day: 1 | 2 | 3 | 4 | 5 | 6 | 7;
   date: Date;
   tags?: ListScrollItemTag[];
 };
@@ -25,7 +22,7 @@ export const CalendarPlaceholder: Partial<CalendarItem> = {
   type: ListScrollItemType.placeholder,
 } as const;
 
-const getPlaceholder = (date: Date) => ({ ...CalendarPlaceholder, id: `empty-${date.getTime()}`, date, day: date.getDay() }) as CalendarItem;
+const getPlaceholder = (date: Date) => ({ ...CalendarPlaceholder, id: `empty-${date.getTime()}`, date }) as CalendarItem;
 const getLoadingPlaceholder = (date: Date) =>
   ({ ...getPlaceholder(date), id: `loading-${date.getTime()}`, type: ListScrollItemType.loading }) as CalendarItem;
 
@@ -162,37 +159,16 @@ export const useCalendarStore = defineStore('data.calendar', () => {
         TraktService.calendar({ start_date, days: days.value }, 'movies'),
       ]);
       const newData: CalendarItem[] = [
-        ...(shows as TraktCalendarShow[]).map(show => {
-          const date = new Date(show.first_aired);
-          let premiere: CalendarItem['premiere'] | undefined;
-          if (show.episode.season === 1 && show.episode.number === 1) premiere = 'series';
-          else if (show.episode.number === 1) premiere = 'season';
-          return {
-            ...show,
-            id: show.episode.ids.trakt ?? show.show.ids.trakt,
-            date,
-            day: date.getDay(),
-            premiere,
-            tags: premiere
-              ? [
-                  {
-                    label: premiere,
-                    i18n: ['calendar', 'tag', 'label', 'premiere'],
-                    type: premiere === 'season' ? 'info' : 'primary',
-                  },
-                ]
-              : undefined,
-          } as CalendarItem;
-        }),
-        ...(movies as TraktCalendarMovie[]).map(movie => {
-          const date = new Date(movie.released);
-          return {
-            ...movie,
-            id: movie.movie.ids.trakt,
-            date,
-            day: date.getDay() as CalendarItem['day'],
-          };
-        }),
+        ...(shows as TraktCalendarShow[]).map(show => ({
+          ...show,
+          id: show.episode.ids.trakt ?? show.show.ids.trakt,
+          date: new Date(show.first_aired),
+        })),
+        ...(movies as TraktCalendarMovie[]).map(movie => ({
+          ...movie,
+          id: movie.movie.ids.trakt,
+          date: new Date(movie.released),
+        })),
       ].sort((a, b) => a.date.getTime() - b.date.getTime());
 
       const spacedData = spaceDate(newData, startDate, endDate);