feat(links): adds custom links and alias integration

Author: dvcol

src/components/views/panel/MoviePanelDetails.vue

@@ -4,6 +4,7 @@ import { computed, type PropType, toRefs } from 'vue';
 
 import type { TraktMovieExtended } from '~/models/trakt/trakt-movie.model';
 
+import PanelAlias from '~/components/views/panel/PanelAlias.vue';
 import PanelDetail from '~/components/views/panel/PanelDetail.vue';
 
 import PanelLinks from '~/components/views/panel/PanelLinks.vue';
@@ -113,6 +114,13 @@ const country = computed(() => {
       />
     </NFlex>
 
+    <!--  Movie name alias  -->
+    <PanelAlias
+      :id="movie?.ids?.trakt.toString()"
+      scope="movie"
+      :placeholder="movie?.title"
+    />
+
     <NFlex class="lists" vertical size="large">
       <!--  Genres  -->
       <PanelDetail
@@ -123,7 +131,7 @@ const country = computed(() => {
       />
 
       <!--  links  -->
-      <PanelLinks :ids="movie?.ids" mode="movie" />
+      <PanelLinks :ids="movie?.ids" mode="movie" :title="movie?.title" />
     </NFlex>
   </NFlex>
 </template>
@@ -136,6 +144,6 @@ const country = computed(() => {
 }
 
 .lists {
-  margin: 1.25rem 0 1rem;
+  margin: 0.25rem 0 1.25rem;
 }
 </style>

src/components/views/panel/PanelAlias.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { NFlex, NInput } from 'naive-ui';
+import { computed, nextTick, type PropType, ref, toRefs } from 'vue';
+
+import type { InputInst } from 'naive-ui';
+
+import PanelDetail from '~/components/views/panel/PanelDetail.vue';
+import {
+  type AliasScope,
+  useLinksStore,
+  useLinksStoreRefs,
+} from '~/stores/settings/links.store';
+import { useI18n } from '~/utils';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  scope: {
+    type: String as PropType<AliasScope>,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: 'none',
+  },
+});
+
+const { scope, id, placeholder } = toRefs(props);
+
+const { aliasEnabled } = useLinksStoreRefs();
+const { getAlias } = useLinksStore();
+
+const alias = getAlias(scope.value, id);
+
+const value = computed(() => {
+  if (!id.value) return;
+  return alias.value || placeholder.value;
+});
+
+const hover = ref(false);
+const focus = ref(false);
+
+const inputRef = ref<InputInst>();
+
+const onClick = async () => {
+  if (!id.value || !aliasEnabled.value) return;
+  hover.value = true;
+  await nextTick();
+  inputRef.value?.focus();
+};
+
+const i18n = useI18n('panel', 'alias');
+</script>
+
+<template>
+  <NFlex
+    v-if="aliasEnabled"
+    class="alias-container"
+    vertical
+    size="large"
+    justify="center"
+  >
+    <!--  Alias Input -->
+    <NInput
+      v-if="hover || focus"
+      ref="inputRef"
+      v-model:value="alias"
+      class="alias-input"
+      :placeholder="placeholder"
+      @focus="focus = true"
+      @blur="focus = false"
+      @mouseleave="hover = false"
+    >
+      <template #prefix>
+        <span class="alias-prefix">{{ i18n('label') }}</span>
+      </template>
+    </NInput>
+
+    <!--  Alias  -->
+    <PanelDetail
+      v-else
+      class="alias-detail"
+      :label="i18n('label')"
+      :value="value"
+      :skeleton="{ width: '6.25rem' }"
+      @click="onClick"
+    />
+  </NFlex>
+</template>
+
+<style lang="scss" scoped>
+.alias-container {
+  box-sizing: border-box;
+  min-height: 36px;
+}
+
+.alias-detail {
+  border-top: 1px solid transparent;
+}
+
+.alias-input {
+  margin: 0 -0.75rem;
+  font-size: 1rem;
+
+  .alias-prefix {
+    min-width: 3rem;
+    color: var(--white-50);
+    font-weight: 600;
+  }
+}
+</style>

src/components/views/panel/PanelLinks.vue

@@ -4,13 +4,15 @@ import { computed, type PropType, toRefs } from 'vue';
 import type { TagLink } from '~/models/tag.model';
 import type { TraktApiIds } from '~/models/trakt/trakt-id.model';
 
+import IconExternalLinkRounded from '~/components/icons/IconExternalLinkRounded.vue';
 import IconIMDb from '~/components/icons/IconIMDb.vue';
 import IconTMDb from '~/components/icons/IconTMDb.vue';
 import IconTVDb from '~/components/icons/IconTVDb.vue';
 import IconTrakt from '~/components/icons/IconTrakt.vue';
 import PanelDetail from '~/components/views/panel/PanelDetail.vue';
 
 import { ResolveExternalLinks } from '~/settings/external.links';
+import { resolveLinkUrl, useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils';
 
 const props = defineProps({
@@ -31,9 +33,17 @@ const props = defineProps({
     type: Number,
     required: false,
   },
+  alias: {
+    type: String,
+    required: false,
+  },
+  title: {
+    type: String,
+    required: false,
+  },
 });
 
-const { ids, mode, season, episode } = toRefs(props);
+const { ids, mode, season, episode, alias, title } = toRefs(props);
 
 const i18n = useI18n('panel', 'detail');
 
@@ -46,6 +56,24 @@ const labelKey = computed(() => {
   };
 });
 
+const { getLinks } = useLinksStore();
+
+const customLinksTemplate = getLinks(mode);
+const customLinks = computed(() => {
+  if (!customLinksTemplate.value) return;
+  return customLinksTemplate.value.map(link => ({
+    ...link,
+    url: resolveLinkUrl(link.url, {
+      ...ids?.value,
+      alias: alias?.value,
+      season: season?.value,
+      episode: episode?.value,
+      title: title?.value,
+    }),
+    icon: IconExternalLinkRounded,
+  }));
+});
+
 const links = computed(() => {
   if (!ids?.value) return;
   const _links: TagLink[] = [];
@@ -112,6 +140,7 @@ const links = computed(() => {
       },
     });
   }
+  if (customLinks.value) _links.push(...customLinks.value);
   return _links;
 });
 </script>

src/components/views/panel/ShowPanelDetails.vue

@@ -6,11 +6,13 @@ import type { TraktEpisodeExtended } from '~/models/trakt/trakt-episode.model';
 import type { TraktSeasonExtended } from '~/models/trakt/trakt-season.model';
 import type { TraktShowExtended } from '~/models/trakt/trakt-show.model';
 
+import PanelAlias from '~/components/views/panel/PanelAlias.vue';
 import PanelDetail from '~/components/views/panel/PanelDetail.vue';
 
 import PanelLinks from '~/components/views/panel/PanelLinks.vue';
+import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils';
-import { capitalizeEachWord } from '~/utils/string.utils';
+import { capitalizeEachWord, deCapitalise } from '~/utils/string.utils';
 
 const props = defineProps({
   episode: {
@@ -133,6 +135,14 @@ const ids = computed(() => {
   if (!show?.value) return;
   return show.value?.ids;
 });
+
+const title = computed(() =>
+  deCapitalise(episode?.value?.title ?? season?.value?.title ?? show?.value?.title),
+);
+
+const { getAlias } = useLinksStore();
+const showId = computed(() => show?.value?.ids?.trakt.toString());
+const alias = getAlias('show', showId);
 </script>
 
 <template>
@@ -205,6 +215,13 @@ const ids = computed(() => {
       />
     </NFlex>
 
+    <!--  Show name alias  -->
+    <PanelAlias
+      :id="show?.ids?.trakt.toString()"
+      scope="show"
+      :placeholder="show?.title"
+    />
+
     <NFlex class="lists" vertical size="large">
       <!--  Genres  -->
       <PanelDetail
@@ -220,6 +237,8 @@ const ids = computed(() => {
         :mode="mode"
         :season="episode?.season ?? season?.number"
         :episode="episode?.number"
+        :alias="alias"
+        :title="title"
       />
     </NFlex>
   </NFlex>

src/i18n/en/panel/panel-alias.json

@@ -0,0 +1,6 @@
+{
+  "panel__alias__label": {
+    "message": "Alias",
+    "description": "Label for the alias field"
+  }
+}

src/stores/data/list.store.ts

@@ -383,9 +383,6 @@ export const useListStore = defineStore('data.list', () => {
         ]
           .filter(Boolean)
           .join(' '),
-        {
-          duration: 50000,
-        },
       );
     } catch (e) {
       console.error('Failed to add item to list');