feat(list): adds show link for list items

Author: dvcol

src/components/common/buttons/TitleLink.vue src/components/common/buttons/AnchorLink.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { NH2 } from 'naive-ui';
-
-import { type Component, type PropType, useAttrs } from 'vue';
+import { type Component, type PropType, toRefs, useAttrs } from 'vue';
 
 import { useLinksStore } from '~/stores/settings/links.store';
 
-defineProps({
+const props = defineProps({
   component: {
     type: Object as PropType<Component>,
     required: false,
@@ -15,13 +14,26 @@ defineProps({
     type: String,
     required: false,
   },
+  text: {
+    type: Boolean,
+    required: false,
+  },
+  onClick: {
+    type: Function as PropType<
+      (e: MouseEvent, link: { url?: string; label?: string }) => void
+    >,
+    required: false,
+  },
 });
 
+const { onClick, label } = toRefs(props);
+
 const attrs = useAttrs() as Record<keyof HTMLAnchorElement, string> | undefined;
 
 const { openTab } = useLinksStore();
 
 const onTitleClick = (e: MouseEvent) => {
+  if (onClick?.value) return onClick.value(e, { url: attrs?.href, label: label?.value });
   e.preventDefault();
   e.stopPropagation();
   openTab(attrs?.href);
@@ -30,15 +42,22 @@ const onTitleClick = (e: MouseEvent) => {
 
 <template>
   <a
+    v-if="$attrs?.href || onClick"
     class="anchor-link"
-    :class="{ 'has-link': !!$attrs.href }"
     :title="label"
     @click="onTitleClick"
   >
-    <component :is="component" class="content" :class="{ 'hover-link': !!$attrs.href }">
+    <component :is="component" v-if="!text && component" class="content hover-link">
       <slot />
     </component>
+    <slot v-else />
   </a>
+  <template v-else>
+    <component :is="component" v-if="!text && component" class="content">
+      <slot />
+    </component>
+    <slot v-else />
+  </template>
 </template>
 
 <style lang="scss" scoped>
@@ -49,31 +68,34 @@ const onTitleClick = (e: MouseEvent) => {
   color: inherit;
   text-decoration: none;
   outline: none;
+  cursor: pointer;
   transition: color 0.3s var(--n-bezier);
   will-change: color;
 
-  &:focus-visible:not(.has-link) {
-    text-decoration: underline;
-    text-underline-offset: 0.2rem;
-  }
-
   .hover-link {
     transition: color 0.3s var(--n-bezier);
     will-change: color;
 
     &:active,
     &:focus-within,
-    &:hover {
+    &:hover,
+    &:focus-visible {
       color: var(--trakt-red);
     }
   }
 
-  &:focus-visible.has-link .hover-link {
+  &:hover,
+  &:focus-visible .hover-link {
     color: var(--trakt-red);
   }
 
   .content {
     margin: 0;
   }
+
+  .content:not(.hover-link) {
+    text-decoration: underline;
+    text-underline-offset: 0.2rem;
+  }
 }
 </style>

src/components/common/list/ListItemPanel.vue

@@ -14,6 +14,7 @@ import {
 import { computed, defineProps, type PropType, ref, toRefs } from 'vue';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
+import AnchorLink from '~/components/common/buttons/AnchorLink.vue';
 import TagLink from '~/components/common/buttons/TagLink.vue';
 import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
 import IconGrid from '~/components/icons/IconGrid.vue';
@@ -255,20 +256,26 @@ const onTagClick = (url?: string) => {
   >
     <div ref="innerContainer">
       <div class="meta type">
-        <NSkeleton v-if="loading" text style="width: 10%" round />
-        <NEllipsis v-else :line-clamp="1" :tooltip="tooltipOptions">{{ type }}</NEllipsis>
+        <NSkeleton v-if="loading" style="width: 10%" round />
+        <AnchorLink v-else text v-bind="item?.typeLink">
+          <NEllipsis :line-clamp="1" :tooltip="tooltipOptions">{{ type }}</NEllipsis>
+        </AnchorLink>
       </div>
       <div class="title">
         <NSkeleton v-if="loading" text style="width: 70%" round />
-        <NEllipsis v-else :line-clamp="2" :tooltip="tooltipOptions">{{
-          title
-        }}</NEllipsis>
+        <AnchorLink v-else text v-bind="item?.titleLink">
+          <NEllipsis :line-clamp="2" :tooltip="tooltipOptions">
+            {{ title }}
+          </NEllipsis>
+        </AnchorLink>
       </div>
       <div class="content">
         <NSkeleton v-if="loading" text style="width: 60%" round />
-        <NEllipsis v-else :line-clamp="contentHeight" :tooltip="tooltipOptions">{{
-          content
-        }}</NEllipsis>
+        <AnchorLink v-else text v-bind="item?.contentLink">
+          <NEllipsis :line-clamp="contentHeight" :tooltip="tooltipOptions">
+            {{ content }}
+          </NEllipsis>
+        </AnchorLink>
       </div>
       <NFlex
         v-if="(!hideTime && date) || tags?.length || showCollected || showPlayed"

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

@@ -8,8 +8,10 @@ import type { ListScrollItem, ListScrollItemMeta, ListScrollItemTag, ListScrollS
 
 import type { ImageQuery } from '~/stores/data/image.store';
 
+import { usePanelItem } from '~/components/views/panel/use-panel-item';
 import { ListScrollItemType } from '~/models/list-scroll.model';
 
+import { RouterService } from '~/services/router.service';
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { useI18n } from '~/utils/i18n.utils';
 
@@ -181,6 +183,18 @@ export const getTags = (item: Pick<ListScrollSourceItem, 'episode' | 'season'>,
   return tags;
 };
 
+const getContentLink = (item: ListScrollSourceItem): ListScrollItem['contentLink'] => {
+  if (!item?.type || !item.show?.ids?.trakt) return;
+  if (![ListScrollItemType.show, ListScrollItemType.episode].map(String).includes(item.type)) return;
+  return {
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+      usePanelItem(RouterService.router).onItemClick({ type: 'show', id: item.show!.ids.trakt });
+    },
+  };
+};
+
 export const computeNewArray = <T extends ListScrollSourceItemWithDate<D>, D extends string | never = never>(
   array: T[],
   dateFn?: D | ((item: T) => T[D]),
@@ -196,6 +210,7 @@ export const computeNewArray = <T extends ListScrollSourceItemWithDate<D>, D ext
     if (!_item.type) _item.type = getType(item);
     if (!_item.title) _item.title = getTitle(item);
     if (!_item.content) _item.content = getContent(item);
+    if (!_item.contentLink) _item.contentLink = getContentLink(_item);
     if (!_item.posterRef) _item.posterRef = ref<string>();
     if (!_item.getPosterQuery) _item.getPosterQuery = getPosterQuery(item, _item.type);
     if (!_item.getProgressQuery) _item.getProgressQuery = getProgressQuery(item);

src/components/views/panel/MoviePanel.vue

@@ -3,7 +3,7 @@ import { deCapitalise } from '@dvcol/common-utils/common/string';
 import { NFlex, NSkeleton } from 'naive-ui';
 import { computed, onMounted, toRefs, watch } from 'vue';
 
-import TitleLink from '~/components/common/buttons/TitleLink.vue';
+import AnchorLink from '~/components/common/buttons/AnchorLink.vue';
 import MoviePanelButtons from '~/components/views/panel/MoviePanelButtons.vue';
 import MoviePanelDetails from '~/components/views/panel/MoviePanelDetails.vue';
 import MoviePanelOverview from '~/components/views/panel/MoviePanelOverview.vue';
@@ -269,14 +269,14 @@ onMounted(() => {
 
 <template>
   <NFlex class="panel-container" justify="center" align="center" vertical>
-    <TitleLink
+    <AnchorLink
       v-if="title"
       class="show-title"
       :href="titleUrl"
       :title="i18n('open_in_trakt', 'common', 'tooltip')"
     >
       {{ title }}
-    </TitleLink>
+    </AnchorLink>
     <NSkeleton
       v-else
       class="show-title-skeleton"

src/components/views/panel/PanelOverview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { NFlex, NH4, NSkeleton } from 'naive-ui';
 
-import TitleLink from '~/components/common/buttons/TitleLink.vue';
+import AnchorLink from '~/components/common/buttons/AnchorLink.vue';
 
 defineProps({
   title: {
@@ -25,9 +25,9 @@ defineProps({
 
 <template>
   <NFlex justify="center" align="center" vertical class="overview">
-    <TitleLink v-if="title" class="title" :href="url" :title="label" :component="NH4">
+    <AnchorLink v-if="title" class="title" :href="url" :title="label" :component="NH4">
       {{ title }}
-    </TitleLink>
+    </AnchorLink>
     <NSkeleton v-else class="title-skeleton" style="width: var(--height-40-dvh)" round />
 
     <div v-if="overview">{{ overview }}</div>

src/components/views/panel/PersonPanel.vue

@@ -5,7 +5,7 @@ import { computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue';
 
 import type { TraktPersonExtended } from '@dvcol/trakt-http-client/models';
 
-import TitleLink from '~/components/common/buttons/TitleLink.vue';
+import AnchorLink from '~/components/common/buttons/AnchorLink.vue';
 import PanelPoster from '~/components/views/panel/PanelPoster.vue';
 import PersonPanelDetails from '~/components/views/panel/PersonPanelDetails.vue';
 import PersonPanelOverview from '~/components/views/panel/PersonPanelOverview.vue';
@@ -65,14 +65,14 @@ const titleUrl = computed(() => {
 
 <template>
   <NFlex class="panel-container" justify="center" align="center" vertical>
-    <TitleLink
+    <AnchorLink
       v-if="title"
       class="show-title"
       :href="titleUrl"
       :title="i18n('open_in_trakt', 'common', 'tooltip')"
     >
       {{ title }}
-    </TitleLink>
+    </AnchorLink>
     <NSkeleton
       v-else
       class="show-title-skeleton"

src/components/views/panel/ShowPanel.vue

@@ -4,7 +4,7 @@ import { NFlex, NSkeleton } from 'naive-ui';
 
 import { computed, onMounted, toRefs, watch } from 'vue';
 
-import TitleLink from '~/components/common/buttons/TitleLink.vue';
+import AnchorLink from '~/components/common/buttons/AnchorLink.vue';
 import PanelPoster from '~/components/views/panel/PanelPoster.vue';
 import PanelShowStatistics from '~/components/views/panel/PanelShowStatistics.vue';
 import ShowPanelButtons from '~/components/views/panel/ShowPanelButtons.vue';
@@ -406,14 +406,14 @@ onMounted(() => {
 
 <template>
   <NFlex class="panel-container" justify="center" align="center" vertical>
-    <TitleLink
+    <AnchorLink
       v-if="title"
       class="show-title"
       :href="titleUrl"
       :title="i18n('open_show_in_trakt', 'common', 'tooltip')"
     >
       {{ title }}
-    </TitleLink>
+    </AnchorLink>
     <NSkeleton
       v-else
       class="show-title-skeleton"

src/components/views/panel/use-panel-item.ts

@@ -2,9 +2,7 @@ import { useRouter } from 'vue-router';
 
 import type { ListScrollItem } from '~/models/list-scroll.model';
 
-export const usePanelItem = () => {
-  const { push, currentRoute } = useRouter();
-
+export const usePanelItem = ({ push, currentRoute } = useRouter()) => {
   const onItemClick = ({
     type,
     id,

src/models/list-scroll.model.ts

@@ -103,15 +103,24 @@ export type ListScrollItemMeta<T = { [key: string]: unknown }> = {
   };
 } & T;
 
+export type AnchorLinkUrl = {
+  href?: string;
+  label?: string;
+  onClick?: (event: MouseEvent, link: Omit<AnchorLinkUrl, 'onClick'>) => void;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- meta is intentionally weakly typed
 export type ListScrollItem<T extends Record<string, any> = ListScrollItemMeta> = Omit<PosterItem, 'type'> & {
   id: string | number;
   index: number;
   key: string;
 
   type?: (typeof ListScrollItemType)[keyof typeof ListScrollItemType];
+  typeLink?: AnchorLinkUrl;
   title?: string;
+  titleLink?: AnchorLinkUrl;
   content?: string;
+  contentLink?: AnchorLinkUrl;
   tags?: ListScrollItemTag[];
 
   progress?: ShowProgress;

src/router/create-router.ts

@@ -1,7 +1,10 @@
 import { chromeRuntimeId } from '@dvcol/web-extension-utils/chrome/runtime';
 import { watch } from 'vue';
+
 import { createRouter as createVueRouter, createWebHashHistory } from 'vue-router';
 
+import type { Router } from 'vue-router';
+
 import { Route } from '~/models/router.model';
 import { routes } from '~/router/routes';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
@@ -10,7 +13,7 @@ import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 import { useExtensionSettingsStore, useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 
 export type RouterOptions = { baseName?: string; baseUrl?: string };
-export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL }: RouterOptions) => {
+export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL }: RouterOptions): Router => {
   const { restoreRoute, restorePanel, defaultTab } = useExtensionSettingsStoreRefs();
   const { initExtensionSettingsStore } = useExtensionSettingsStore();
 

src/services/router.service.ts

@@ -0,0 +1,19 @@
+import type { Router } from 'vue-router';
+import type { RouterOptions } from '~/router';
+
+import { createRouter } from '~/router';
+
+export class RouterService {
+  private static instance: Router;
+
+  static get router() {
+    if (!RouterService.instance) throw new Error('Router not initialized');
+    return RouterService.instance;
+  }
+
+  static init(options: RouterOptions) {
+    if (RouterService.instance) return this.instance;
+    RouterService.instance = createRouter(options);
+    return RouterService.instance;
+  }
+}

src/web/init-vue-app.ts

@@ -6,7 +6,7 @@ import type { App, Component } from 'vue';
 
 import type { RouterOptions } from '~/router';
 
-import { createRouter } from '~/router';
+import { RouterService } from '~/services/router.service';
 import { initServices } from '~/web/init-services';
 
 export type InitVueAppOption = RouterOptions & { view?: { option?: boolean; popup?: boolean; web?: boolean } };
@@ -19,7 +19,7 @@ export const initVueApp = (component: Component, options: InitVueAppOption = {})
   app.use(pinia);
 
   let router = getCurrentInstance()?.appContext?.config?.globalProperties?.$router;
-  if (!router) router = createRouter(options);
+  if (!router) router = RouterService.init(options);
   app.use(router);
 
   initServices(options.view).catch(error => console.error('Failed to initialized services.', error));