feat(tags): adds open link on click

Author: dvcol

src/components/common/list/ListItemPanel.vue

@@ -16,6 +16,7 @@ import { type ListScrollItem } from '~/models/list-scroll.model';
 
 import { useShowStore } from '~/stores/data/show.store';
 import { useI18n } from '~/utils';
+import { createTab } from '~/utils/browser/browser.utils';
 import { deCapitalise } from '~/utils/string.utils';
 
 const i18n = useI18n('list', 'item', 'panel');
@@ -89,6 +90,11 @@ const tooltipOptions = computed<PopoverProps>(() => ({
   showArrow: false,
   delay: 500,
 }));
+
+const onTagClick = (url?: string) => {
+  if (!url) return;
+  createTab({ url });
+};
 </script>
 
 <template>
@@ -122,10 +128,12 @@ const tooltipOptions = computed<PopoverProps>(() => ({
           <NTag
             v-else
             class="tag"
-            :class="{ meta: tag.meta }"
+            :class="{ meta: tag.meta, link: !!tag.url }"
             size="small"
-            :type="tag.type"
             :bordered="tag.bordered ?? false"
+            :href="tag.url"
+            v-bind="tag"
+            @click="onTagClick(tag.url)"
           >
             {{ tag.label }}
           </NTag>
@@ -217,6 +225,18 @@ const tooltipOptions = computed<PopoverProps>(() => ({
     .tag {
       width: fit-content;
     }
+
+    .link {
+      cursor: pointer;
+
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--n-close-icon-color-hover),
+          transparent 90%
+        );
+      }
+    }
   }
 
   .panel-progress {

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 { ResolveExternalLinks } from '~/settings/external.links';
 import { useI18n } from '~/utils';
 
 export type ListScrollSourceItemWithDate<T extends string> = ListScrollSourceItem & Partial<Record<T, string | number | Date>>;
@@ -89,6 +90,11 @@ export const getTags = (item: Pick<ListScrollSourceItem, 'episode' | 'season'>,
         .padStart(2, '0')}`,
       type: 'warning',
       bordered: true,
+      url: ResolveExternalLinks.search({
+        type: 'episode',
+        source: 'trakt',
+        id: item.episode.ids.trakt,
+      }),
     });
 
     let premiere: 'season' | 'series' | 'mid_season' | null = null;
@@ -108,6 +114,11 @@ export const getTags = (item: Pick<ListScrollSourceItem, 'episode' | 'season'>,
     tags.push({
       label: `Season ${item.season.number.toString().padStart(2, '0')}`,
       type: 'warning',
+      url: ResolveExternalLinks.search({
+        type: 'season',
+        source: 'trakt',
+        id: item.season.ids.trakt,
+      }),
     });
   }
 

src/models/list-scroll.model.ts

@@ -38,10 +38,9 @@ export type ListScrollSourceItem = {
 export type ListScrollItemTag = {
   label: string;
   i18n?: boolean | string[];
-  type?: TagProps['type'];
-  bordered?: boolean;
   meta?: string;
-};
+  url?: string;
+} & TagProps;
 
 export type ListScrollItemProgressEpisode = BaseTraktProgressEpisode & {
   date: Date;

src/settings/external.links.ts

@@ -19,3 +19,34 @@ export const ExternaLinks = {
   reddit: 'https://www.reddit.com/',
   discord: 'https://discord.com/',
 } as const;
+
+export const ResolveExternalLinks = {
+  trakt: ({
+    type,
+    slug,
+    season,
+    episode,
+    base = ExternaLinks.trakt.production,
+  }: {
+    type: 'movies' | 'shows' | 'season' | 'episode' | 'person' | 'comment' | 'list';
+    slug: string;
+    season?: number;
+    episode?: number;
+    base?: string;
+  }) => {
+    if (type === 'episode') return `${base}shows/${slug}/seasons/${season}/episodes/${episode}`;
+    if (type === 'season') return `${base}shows/${slug}/seasons/${season}`;
+    return `${base}${type}/${slug}`;
+  },
+  search: ({
+    id,
+    type,
+    source,
+    base = ExternaLinks.trakt.production,
+  }: {
+    id: string | number;
+    type?: 'movie' | 'show' | 'season' | 'episode' | 'person';
+    source: 'trakt' | 'imdb' | 'tmdb' | 'tvdb';
+    base?: string;
+  }) => `${base}search/${source}/${id}${type ? `?id_type=${type}` : ''}`,
+};