fix(panel): adjust css to make active episode more visible

Author: dvcol

src/components/common/buttons/ButtonLink.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { type ButtonProps, NButton } from 'naive-ui';
+import { type PropType } from 'vue';
 import { RouterLink, type RouterLinkProps } from 'vue-router';
 
-import type { PropType } from 'vue';
-
 defineProps({
   link: {
     type: Object as PropType<RouterLinkProps>,
@@ -13,6 +12,11 @@ defineProps({
     type: Object as PropType<ButtonProps>,
     required: false,
   },
+  muted: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 </script>
 
@@ -27,7 +31,11 @@ defineProps({
       :secondary="isActive"
       :quaternary="!isActive"
       class="button-link"
-      :class="$attrs.class"
+      :class="{
+        muted,
+        'is-active': isActive,
+        'is-exact-active': isExactActive,
+      }"
       :style="$attrs.style"
       round
       size="small"
@@ -46,5 +54,13 @@ defineProps({
   height: 1.5rem;
   margin: 0;
   padding: 0.125rem;
+
+  &.is-active {
+    --n-color: var(--n-color-focus) !important;
+  }
+
+  &.muted:not(.is-active) {
+    opacity: 0.5;
+  }
 }
 </style>

src/components/views/panel/MoviePanel.vue

@@ -268,7 +268,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <NFlex class="panel-container" justify="center" align="center" vertical>
+  <NFlex
+    class="panel-container"
+    justify="center"
+    align="center"
+    vertical
+    :data-movie="movieId"
+  >
     <AnchorLink
       v-if="title"
       class="show-title"

src/components/views/panel/PersonPanel.vue

@@ -64,7 +64,13 @@ const titleUrl = computed(() => {
 </script>
 
 <template>
-  <NFlex class="panel-container" justify="center" align="center" vertical>
+  <NFlex
+    class="panel-container"
+    justify="center"
+    align="center"
+    vertical
+    :data-person="personId"
+  >
     <AnchorLink
       v-if="title"
       class="show-title"

src/components/views/panel/ShowPanel.vue

@@ -404,7 +404,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <NFlex class="panel-container" justify="center" align="center" vertical>
+  <NFlex
+    class="panel-container"
+    justify="center"
+    align="center"
+    vertical
+    :data-mode="panelType"
+    :data-show="showId"
+    :data-season="season?.ids?.trakt"
+    :data-episode="episode?.ids?.trakt"
+  >
     <AnchorLink
       v-if="title"
       class="show-title"

src/components/views/panel/ShowPanelPicker.vue

@@ -108,8 +108,8 @@ const i18n = useI18n('panel', 'picker');
             v-for="{ link, number, finished, collected, aired } in seasonsLinks"
             :key="`season-${number}`"
             :link="{ to: link }"
-            :button="{ type: finished ? 'primary' : collected ? 'info' : undefined }"
-            :style="{ opacity: aired ? 1 : 0.75 }"
+            :button="{ type: finished ? 'primary' : collected ? 'info' : 'default' }"
+            :muted="!aired"
           >
             {{ number }}
           </ButtonLink>
@@ -132,7 +132,7 @@ const i18n = useI18n('panel', 'picker');
             v-slot="{ isActive }"
             :link="{ to: link }"
             :button="{ type: finished ? 'primary' : collected ? 'info' : undefined }"
-            :style="{ opacity: aired ? 1 : 0.75 }"
+            :muted="!aired"
           >
             <span class="label" :class="{ active: isActive }">{{ number }}</span>
           </ButtonLink>