feat(navbar): adds account dropdown tab

Author: dvcol

src/components/AppComponent.vue

@@ -3,11 +3,9 @@ import { Transition } from 'vue';
 import { RouterView } from 'vue-router';
 
 import { NavbarComponent } from '~/components/common';
-import { useSettingsStoreRefs } from '~/stores/settings.store';
-import { useI18n } from '~/utils';
+import { useAuthSettingsStoreRefs } from '~/stores/settings.store';
 
-const i18n = useI18n('global');
-const { isAuthenticated } = useSettingsStoreRefs();
+const { isAuthenticated } = useAuthSettingsStoreRefs();
 </script>
 
 <template>
@@ -33,13 +31,13 @@ header {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background: rgb(0 0 0 / 30%);
-  backdrop-filter: blur(2px);
+  background: var(--bg-blur-black);
+  backdrop-filter: blur(var(--bg-blur));
   transition: background 0.5s;
   will-change: background;
 
   &:hover {
-    background: rgb(0 0 0 / 60%);
+    background: var(--bg-blur-black-hover);
   }
 }
 

src/components/common/navbar/NavbarComponent.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import { NTab, NTabs } from 'naive-ui';
+import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
+import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
+
 import { Route } from '~/router';
 import { useI18n } from '~/utils';
 
@@ -13,17 +16,39 @@ const navigate = (to: Route) => {
   router.push(to);
 };
 
-const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search, Route.Settings];
+const routes = [Route.Progress, Route.Calendar, Route.History, Route.List, Route.Search];
+
+const navElement = ref<HTMLElement>();
 </script>
 
 <template>
-  <nav>
-    <NTabs :value="route.name?.toString()" class="tabs" type="segment" justify-content="space-evenly" animated>
+  <nav ref="navElement">
+    <NTabs
+      :value="route.name?.toString()"
+      class="tabs"
+      type="segment"
+      justify-content="space-evenly"
+      animated
+    >
       <template v-for="_route in routes" :key="_route">
-        <NTab class="tab" :name="_route.toLowerCase()" type="segment" @click="navigate(_route)">
-          {{ i18n(_route.toLowerCase()) }}
+        <NTab
+          class="tab"
+          :name="_route.toLowerCase()"
+          type="segment"
+          @click="navigate(_route)"
+        >
+          <span> {{ i18n(_route.toLowerCase()) }}</span>
         </NTab>
       </template>
+      <NTab
+        class="tab"
+        style="position: relative"
+        :name="Route.Settings.toLowerCase()"
+        type="segment"
+        @click="navigate(Route.Settings)"
+      >
+        <NavbarSettingsDropdown v-if="navElement" :parent-element="navElement" />
+      </NTab>
     </NTabs>
   </nav>
 </template>
@@ -52,13 +77,25 @@ nav {
   .tabs {
     --n-bar-color: var(--trakt-red-dark) !important;
     --n-tab-text-color-active: var(--vt-c-white) !important;
-    --n-tab-text-color-hover: color-mix(in srgb, var(--trakt-red) 90%, var(--vt-c-white)) !important;
-    --n-tab-color-segment: color-mix(in srgb, var(--trakt-red) 50%, transparent) !important;
+    --n-tab-text-color-hover: color-mix(
+      in srgb,
+      var(--trakt-red) 90%,
+      var(--vt-c-white)
+    ) !important;
+    --n-tab-color-segment: color-mix(
+      in srgb,
+      var(--trakt-red) 50%,
+      transparent
+    ) !important;
     --n-color-segment: inherit !important;
 
     /* stylelint-disable-next-line selector-class-pattern -- overriding theme class  */
     .n-tabs-tab--active {
-      --n-tab-text-color-hover: color-mix(in srgb, var(--trakt-white) 99%, var(--vt-c-red)) !important;
+      --n-tab-text-color-hover: color-mix(
+        in srgb,
+        var(--trakt-white) 99%,
+        var(--vt-c-red)
+      ) !important;
     }
 
     .n-tabs-capsule {

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { NAvatar, NDropdown, NEllipsis, NIcon, NSpace } from 'naive-ui';
+import { computed, defineProps, h } from 'vue';
+
+import IconAccount from '~/components/icons/IconAccount.vue';
+import IconLogOut from '~/components/icons/IconLogOut.vue';
+
+import { Route } from '~/router';
+import { useUserSettingsStoreRefs } from '~/stores/settings.store';
+import { Blurs, Colors } from '~/styles/colors.style';
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('route');
+
+const { userSetting } = useUserSettingsStoreRefs();
+
+const avatar = computed(() => userSetting.value?.user?.images?.avatar?.full);
+const username = computed(() => userSetting.value?.user?.username);
+
+defineProps({
+  parentElement: {
+    type: HTMLElement,
+    required: true,
+  },
+});
+
+const options = [
+  {
+    label: 'Logout',
+    key: 'logout',
+    icon: () =>
+      h(NIcon, null, {
+        default: () => h(IconLogOut, { size: '1.5em' }),
+      }),
+  },
+];
+</script>
+
+<template>
+  <NDropdown
+    trigger="hover"
+    :options="options"
+    :to="parentElement"
+    placement="bottom-end"
+    size="small"
+    class="dropdown"
+    :style="{
+      'margin-top': '0.75rem',
+      'margin-right': '-0.25rem',
+      'text-align': 'left',
+      'min-width': 'calc(100vw / 6 - 3px)',
+      'background-color': Colors.bgBlurBlackHover,
+      'backdrop-filter': Blurs.blur,
+    }"
+    @select="(...args: any[]) => console.info(args)"
+  >
+    <NSpace justify="space-around" align="center" :wrap="false">
+      <NEllipsis
+        style="
+          max-width: calc(100vw / 6 - 0.25rem - 3px - 1.75rem);
+          margin-right: 1.75rem;
+          margin-left: 0.5rem;
+        "
+        :tooltip="{
+          to: parentElement,
+          placement: 'left',
+          delay: 1000,
+        }"
+      >
+        {{ username ?? i18n(Route.Settings.toLowerCase()) }}
+      </NEllipsis>
+
+      <NAvatar
+        v-if="avatar"
+        :src="avatar"
+        round
+        size="small"
+        color="transparent"
+        style="position: absolute; top: 3px; right: 0.5rem"
+      />
+      <NIcon v-else style="position: absolute; top: 0.4rem; right: 0.75rem" size="1.5em">
+        <IconAccount />
+      </NIcon>
+    </NSpace>
+  </NDropdown>
+</template>

src/components/icons/IconAccount.vue

@@ -0,0 +1,32 @@
+<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="28"
+      stroke-dashoffset="28"
+      stroke-linecap="round"
+      stroke-width="2"
+    >
+      <path d="M4 21V20C4 16.6863 6.68629 14 10 14H14C17.3137 14 20 16.6863 20 20V21">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.4s"
+          values="28;0"
+        />
+      </path>
+      <path
+        d="M12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7C16 9.20914 14.2091 11 12 11Z"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.5s"
+          dur="0.4s"
+          values="28;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/icons/IconCommunity.vue

@@ -0,0 +1,43 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
+      <path
+        stroke-dasharray="46"
+        stroke-dashoffset="46"
+        d="M16 5V4C16 3.44772 15.5523 3 15 3H6C5.44771 3 5 3.44772 5 4V20C5 20.5523 5.44772 21 6 21H15C15.5523 21 16 20.5523 16 20V19"
+      >
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.5s"
+          values="46;0"
+        />
+      </path>
+      <path stroke-dasharray="12" stroke-dashoffset="12" d="M10 12h11" opacity="0">
+        <set attributeName="opacity" begin="0.6s" to="1" />
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.6s"
+          dur="0.2s"
+          values="12;0"
+        />
+      </path>
+      <path
+        stroke-dasharray="6"
+        stroke-dashoffset="6"
+        d="M21 12l-3.5 -3.5M21 12l-3.5 3.5"
+        opacity="0"
+      >
+        <set attributeName="opacity" begin="0.8s" to="1" />
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          begin="0.8s"
+          dur="0.2s"
+          values="6;0"
+        />
+      </path>
+    </g>
+  </svg>
+</template>

src/components/icons/IconDocumentation.vue

@@ -18,5 +18,6 @@ export type { TraktExtension, DefineComponent, WebComponents };
 declare global {
   interface Window {
     chrome: typeof chrome;
+    trakt: Record<string, unknown>;
   }
 }

src/components/icons/IconEcosystem.vue

@@ -15,6 +15,11 @@
   --vt-c-text-light-2: rgb(60 60 60 / 66%);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
+  
+  /* ui color variables */
+  --bg-blue: 2px;
+  --bg-blur-black: rgb(0 0 0 / 30%);
+  --bg-blur-black-hover: rgb(0 0 0 / 60%);
 
   /* trakt.tv brand color */
   --trakt-red: #ed1c24;

src/components/icons/IconLogOut.vue

@@ -0,0 +1,8 @@
+export const Colors = {
+  bgBlurBlack: 'rgba(0, 0, 0, 30%)',
+  bgBlurBlackHover: 'rgba(0, 0, 0, 60%)',
+} as const;
+
+export const Blurs = {
+  blur: 'blur(2px)',
+} as const;

src/components/icons/IconSupport.vue

@@ -16,13 +16,33 @@ export const sessionStorage: chrome.storage.StorageArea = chrome?.storage?.sessi
 /**
  * This function is used to wrap the storage areas to provide type inference and a more convenient interface.
  * @param area The storage area to wrap.
+ * @param name The name of the storage area.
  */
-export const storageWrapper = (area: chrome.storage.StorageArea) => ({
-  get: <T>(key: string): Promise<T> => area.get(key).then(({ [key]: value }) => value),
-  set: <T>(key: string, value: T): Promise<void> => area.set({ [key]: value }),
-  remove: (key: string): Promise<void> => area.remove(key),
-  clear: (): Promise<void> => area.clear(),
-});
+export const storageWrapper = (area: chrome.storage.StorageArea, name = crypto.randomUUID()) => {
+  if (!chrome?.storage) {
+    console.warn('Storage API is not available, using in-memory storage instead.');
+    const storage: Record<string, unknown> = {};
+    window.trakt = { ...window.trakt, [name]: storage };
+    return {
+      get: async <T>(key: string): Promise<T> => storage[key] as T,
+      set: async <T>(key: string, value: T): Promise<void> => {
+        storage[key] = value;
+      },
+      remove: async (key: string): Promise<void> => {
+        delete storage[key];
+      },
+      clear: async (): Promise<void> => {
+        Object.keys(storage).forEach(key => delete storage[key]);
+      },
+    };
+  }
+  return {
+    get: <T>(key: string): Promise<T> => area.get(key).then(({ [key]: value }) => value),
+    set: <T>(key: string, value: T): Promise<void> => area.set({ [key]: value }),
+    remove: (key: string): Promise<void> => area.remove(key),
+    clear: (): Promise<void> => area.clear(),
+  };
+};
 
 /**
  * This object is used to access the storage areas.