feat(router): create about route

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -41,7 +41,11 @@ const activableRoutes = [...routes, Route.Settings];
 const activeRoute = computed(() => {
   const _name = route.name?.toString();
   if (!_name) return;
-  return activableRoutes.find(r => r === _name) ?? routes.find(r => _name.startsWith(r));
+  return (
+    activableRoutes.find(r => r === _name) ??
+    routes.find(r => _name.startsWith(r)) ??
+    Route.Settings
+  );
 });
 
 const isHover = ref(false);

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -6,6 +6,7 @@ import { computed, defineProps, h, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import type { DropdownProps } from 'naive-ui';
+
 import type { Component } from 'vue';
 
 import type { ArrayElement } from '~/utils/typescript.utils';
@@ -14,6 +15,7 @@ import IconAccount from '~/components/icons/IconAccount.vue';
 import IconAccountAdd from '~/components/icons/IconAccountAdd.vue';
 import IconCog from '~/components/icons/IconCog.vue';
 import IconExternalLink from '~/components/icons/IconExternalLink.vue';
+import IconLightbulb from '~/components/icons/IconLightbulb.vue';
 import IconLogOut from '~/components/icons/IconLogOut.vue';
 
 import { Route } from '~/router';
@@ -78,6 +80,7 @@ const toOption = (
 const options = computed<DropdownProps['options']>(() => {
   const baseOptions: DropdownProps['options'] = [
     toOption('settings', IconCog),
+    toOption('about', IconLightbulb),
     { type: 'divider', key: 'external-links' },
     toOption('trakt', IconExternalLink),
     { type: 'divider', key: 'session-divider' },
@@ -108,10 +111,11 @@ const loadUser = async (account: string) => {
 };
 
 const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
-  console.info('Selected:', key);
   switch (key) {
     case 'settings':
       return router.push(Route.Settings);
+    case 'about':
+      return router.push(Route.About);
     case 'trakt':
       return createTab({
         url: ExternaLinks.trakt[TraktService.isStaging ? 'staging' : 'production'],

src/components/icons/IconLightbulb.vue

@@ -0,0 +1,26 @@
+<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="46"
+      stroke-dashoffset="46"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 17H9V14.1973C7.2066 13.1599 6 11.2208 6 9C6 5.68629 8.68629 3 12 3C15.3137 3 18 5.68629 18 9C18 11.2208 16.7934 13.1599 15 14.1973V17z"
+    >
+      <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="46;0" />
+    </path>
+    <rect width="6" height="0" x="9" y="20"
+fill="currentColor" rx="1">
+      <animate
+        fill="freeze"
+        attributeName="height"
+        begin="0.5s"
+        dur="0.2s"
+        values="0;2"
+      />
+    </rect>
+  </svg>
+</template>

src/components/views/about/AboutComponent.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+// TODO
+</script>
+
+<template>
+  <span>This is a about component</span>
+</template>
+
+<style lang="scss" scoped>
+// TODO
+</style>

src/components/views/calendar/index.ts

@@ -14,5 +14,9 @@
   "navbar__settings__trakt": {
     "message": "Trakt",
     "description": "Open trakt website."
+  },
+  "navbar__settings__about": {
+    "message": "About",
+    "description": "About page."
   }
 }

src/components/views/history/index.ts

@@ -22,5 +22,9 @@
   "route__settings": {
     "message": "Settings",
     "description": "Settings and options route name"
+  },
+  "route__about": {
+    "message": "About",
+    "description": "About page route name"
   }
 }

src/components/views/login/index.ts

@@ -7,6 +7,7 @@ export enum Route {
   Progress = 'progress',
   Search = 'search',
   Settings = 'settings',
+  About = 'about',
   Login = 'login',
 }
 
@@ -108,4 +109,9 @@ export const routes: RouteRecordRaw[] = [
     name: Route.Settings,
     component: () => import('../components/views/settings/SettingsComponent.vue'),
   },
+  {
+    path: `/${Route.About}`,
+    name: Route.About,
+    component: () => import('../components/views/about/AboutComponent.vue'),
+  },
 ];

src/components/views/progress/index.ts

@@ -346,7 +346,7 @@ export class TraktService {
     show: {
       async watched(showId: string | number, cacheOption?: BaseCacheOption) {
         const response = await TraktService.traktClient.shows.progress.watched.cached(
-          { id: showId, specials: true, count_specials: false },
+          { id: showId, specials: true, count_specials: true },
           undefined,
           cacheOption,
         );
@@ -355,7 +355,7 @@ export class TraktService {
 
       async collection(showId: string | number, cacheOption?: BaseCacheOption) {
         const response = await TraktService.traktClient.shows.progress.collection.cached(
-          { id: showId, specials: true, count_specials: false },
+          { id: showId, specials: true, count_specials: true },
           undefined,
           cacheOption,
         );