feat(settings): adds link settings card

Author: dvcol

src/components/common/buttons/TagLink.vue

@@ -28,7 +28,7 @@ const onClick = (e: MouseEvent) => {
 <template>
   <a
     :href="tag?.url"
-    :title="tag?.title"
+    :title="tag?.title ?? tag?.url"
     :data-tag="JSON.stringify(tag)"
     @click="onClick"
   >

src/components/container/ContainerComponent.ce.vue

@@ -139,6 +139,17 @@ const root = ref<HTMLElement>();
   }
 }
 
+.n-popover.n-popconfirm {
+  @include mixin.hover-background-only(
+    $from: var(--bg-color-80),
+    $to: var(--bg-color-90)
+  );
+}
+
+.n-popconfirm .n-popconfirm__action {
+  justify-content: space-around;
+}
+
 .n-notification-container .n-notification,
 .n-message-wrapper .n-message,
 .n-dropdown-menu,

src/components/icons/IconConfirm.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-dasharray="24"
+      stroke-dashoffset="24"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M5 11L11 17L21 7"
+    >
+      <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="24;0" />
+    </path>
+  </svg>
+</template>

src/components/icons/IconPlus.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-dasharray="18"
+      stroke-dashoffset="18"
+      stroke-linecap="round"
+      stroke-width="2"
+    >
+      <path d="M12 5V19">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.4s"
+          dur="0.3s"
+          values="18;0"
+        />
+      </path>
+      <path d="M5 12H19">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.3s"
+          values="18;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/views/panel/MoviePanelDetails.vue

@@ -8,8 +8,9 @@ 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({
   movie: {
@@ -68,6 +69,12 @@ const country = computed(() => {
   if (!movie?.value) return;
   return movie.value?.country || '-';
 });
+
+const { getAlias } = useLinksStore();
+const movieId = computed(() => movie?.value?.ids?.trakt.toString());
+const alias = getAlias('show', movieId);
+const movieAlias = computed(() => alias.value || movie?.value?.title);
+const movieTitle = computed(() => deCapitalise(movie?.value?.title));
 </script>
 
 <template>
@@ -111,14 +118,15 @@ const country = computed(() => {
         :label="i18n('status')"
         :value="status"
         :skeleton="{ width: '7.5rem' }"
+        grow
       />
     </NFlex>
 
     <!--  Movie name alias  -->
     <PanelAlias
       :id="movie?.ids?.trakt.toString()"
       scope="movie"
-      :placeholder="movie?.title"
+      :placeholder="movieTitle"
     />
 
     <NFlex class="lists" vertical size="large">
@@ -131,7 +139,12 @@ const country = computed(() => {
       />
 
       <!--  links  -->
-      <PanelLinks :ids="movie?.ids" mode="movie" :title="movie?.title" />
+      <PanelLinks
+        :ids="movie?.ids"
+        mode="movie"
+        :title="movieTitle"
+        :alias="movieAlias"
+      />
     </NFlex>
   </NFlex>
 </template>
@@ -146,4 +159,10 @@ const country = computed(() => {
 .lists {
   margin: 0.25rem 0 1.25rem;
 }
+
+@media (width < 700px) {
+  .row {
+    gap: 0.75rem 0.5rem !important;
+  }
+}
 </style>

src/components/views/panel/PersonPanelDetails.vue

@@ -128,6 +128,7 @@ const socials = computed(() => {
         :label="i18n('death')"
         :value="death"
         :skeleton="{ width: '5.125rem' }"
+        grow
       />
     </NFlex>
 
@@ -169,4 +170,10 @@ const socials = computed(() => {
 .lists {
   margin: 1.5rem 0 0.5rem;
 }
+
+@media (width < 700px) {
+  .row {
+    gap: 0.75rem 0.5rem !important;
+  }
+}
 </style>

src/components/views/panel/ShowPanelDetails.vue

@@ -136,13 +136,14 @@ const ids = computed(() => {
   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);
+const showAlias = computed(() => alias.value || show?.value?.title);
+const showTitle = computed(() => deCapitalise(show?.value?.title));
+const title = computed(() =>
+  deCapitalise(episode?.value?.title ?? season?.value?.title ?? show?.value?.title),
+);
 </script>
 
 <template>
@@ -186,6 +187,7 @@ const alias = getAlias('show', showId);
       <PanelDetail
         :label="i18n('status')"
         :value="status"
+        grow
         :skeleton="{ width: '7.5rem' }"
       />
     </NFlex>
@@ -211,16 +213,13 @@ const alias = getAlias('show', showId);
         v-if="mode === 'episode'"
         :label="i18n('type')"
         :value="episodeType"
+        grow
         :skeleton="{ width: '6.25rem' }"
       />
     </NFlex>
 
     <!--  Show name alias  -->
-    <PanelAlias
-      :id="show?.ids?.trakt.toString()"
-      scope="show"
-      :placeholder="show?.title"
-    />
+    <PanelAlias :id="showId" scope="show" :placeholder="showTitle" />
 
     <NFlex class="lists" vertical size="large">
       <!--  Genres  -->
@@ -237,7 +236,7 @@ const alias = getAlias('show', showId);
         :mode="mode"
         :season="episode?.season ?? season?.number"
         :episode="episode?.number"
-        :alias="alias"
+        :alias="showAlias"
         :title="title"
       />
     </NFlex>
@@ -254,4 +253,10 @@ const alias = getAlias('show', showId);
 .lists {
   margin: 0.25rem 0 0.5rem;
 }
+
+@media (width < 700px) {
+  .row {
+    gap: 0.75rem 0.5rem !important;
+  }
+}
 </style>

src/components/views/settings/SettingsComponent.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { NAnchor, NAnchorLink, NCard, NLayout, NLayoutSider } from 'naive-ui';
 
-import { onDeactivated, type Ref, ref } from 'vue';
+import { type Component, onDeactivated, type Ref, ref } from 'vue';
+
+import SettingsLinks from '~/components/views/settings/SettingsLinks.vue';
 
 import { useI18n } from '~/utils';
 
@@ -10,14 +12,15 @@ const i18n = useI18n('settings');
 type Section = {
   title: string;
   reference: Ref<[InstanceType<typeof NCard>] | undefined>;
+  component?: Component;
 };
 
 const sections: Section[] = [
   { title: 'menu__account', reference: ref() },
-  { title: 'menu__cache', reference: ref() },
   { title: 'menu__tabs', reference: ref() },
+  { title: 'menu__links', reference: ref(), component: SettingsLinks },
+  { title: 'menu__cache', reference: ref() },
   { title: 'menu__logs', reference: ref() },
-  { title: 'menu__links', reference: ref() },
 ];
 
 const focus = ref();
@@ -78,17 +81,18 @@ onDeactivated(() => {
       }"
     >
       <NCard
-        v-for="section in sections"
+        v-for="(section, index) in sections"
         :id="section.title"
         :ref="section.reference"
         :key="section.title"
         class="card"
         :class="{ target: focus?.title === section.title }"
+        :style="{ '--index': sections.length - index }"
         :title="i18n(section.title)"
         @mouseenter="onEnter(section)"
         @mouseleave="onLeave(section)"
       >
-        card Content
+        <component :is="section.component" />
       </NCard>
     </NLayout>
   </NLayout>
@@ -107,6 +111,7 @@ onDeactivated(() => {
   .card {
     @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
 
+    z-index: var(--index);
     min-height: 20rem;
 
     &:not(:last-child) {