feat(notification): create notification service

Author: dvcol

src/components/web/ContainerComponent.ce.vue src/components/container/ContainerComponent.ce.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import { darkTheme, lightTheme, NConfigProvider, NLoadingBarProvider } from 'naive-ui';
+import {
+  darkTheme,
+  lightTheme,
+  NConfigProvider,
+  NLoadingBarProvider,
+  NMessageProvider,
+  NNotificationProvider,
+} from 'naive-ui';
 
 import { computed, ref } from 'vue';
 
-import LoadingBarProvider from '~/components/common/navbar/LoadingBarProvider.vue';
+import LoadingBarProvider from '~/components/container/LoadingBarProvider.vue';
+import MessageProvider from '~/components/container/MessageProvider.vue';
+import NotificationProvider from '~/components/container/NotificationProvider.vue';
 import { watchPreferDark } from '~/utils';
 import { lazyComponent } from '~/utils/lazy.utils';
 
@@ -18,17 +27,22 @@ const root = ref<HTMLElement>();
 <template>
   <div id="trakt-extension-root" ref="root">
     <NConfigProvider :theme="theme" abstract>
+      <AppComponent />
+
       <NLoadingBarProvider
         :to="root"
-        :loading-bar-style="{
-          loading: {
-            '--n-color-loading': 'white',
-          },
-        }"
+        :loading-bar-style="{ loading: { '--n-color-loading': 'white' } }"
       >
-        <AppComponent />
         <LoadingBarProvider />
       </NLoadingBarProvider>
+
+      <NMessageProvider :to="root">
+        <MessageProvider />
+      </NMessageProvider>
+
+      <NNotificationProvider :to="root">
+        <NotificationProvider />
+      </NNotificationProvider>
     </NConfigProvider>
   </div>
 </template>

src/components/common/navbar/LoadingBarProvider.vue src/components/container/LoadingBarProvider.vue

@@ -3,7 +3,9 @@ import { useLoadingBar } from 'naive-ui';
 
 import { LoadingBarService } from '~/services/loading-bar.service';
 
-const loadingBar = useLoadingBar();
-
-LoadingBarService.instance = loadingBar;
+LoadingBarService.instance = useLoadingBar();
 </script>
+
+<template>
+  <div id="loading-bar-provider" hidden style="display: none" />
+</template>

src/components/container/MessageProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useMessage } from 'naive-ui';
+
+import { NotificationService } from '~/services/notification.service';
+
+NotificationService.message = useMessage();
+</script>
+
+<template>
+  <div id="message-provider" hidden style="display: none" />
+</template>

src/components/container/NotificationProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useNotification } from 'naive-ui';
+
+import { NotificationService } from '~/services/notification.service';
+
+NotificationService.notification = useNotification();
+</script>
+
+<template>
+  <div id="notification-provider" hidden style="display: none" />
+</template>

src/services/loading-bar.service.ts

@@ -2,4 +2,19 @@ import type { useLoadingBar } from 'naive-ui';
 
 export class LoadingBarService {
   static instance: ReturnType<typeof useLoadingBar>;
+
+  static start() {
+    if (!this.instance) console.warn('LoadingBarService instance is not initialized');
+    this.instance.start();
+  }
+
+  static finish() {
+    if (!this.instance) console.warn('LoadingBarService instance is not initialized');
+    this.instance.finish();
+  }
+
+  static error() {
+    if (!this.instance) console.warn('LoadingBarService instance is not initialized');
+    this.instance.error();
+  }
 }

src/services/notification.service.ts

@@ -0,0 +1,6 @@
+import type { useMessage, useNotification } from 'naive-ui';
+
+export class NotificationService {
+  static notification: ReturnType<typeof useNotification>;
+  static message: ReturnType<typeof useMessage>;
+}

src/services/trakt.service.ts

@@ -103,12 +103,12 @@ export class TraktService {
     this.traktClient.onCall(async call => {
       console.info('TraktClient.onCall', call);
 
-      const timeout = setTimeout(() => LoadingBarService.instance?.start(), 500);
+      const timeout = setTimeout(() => LoadingBarService.start(), 500);
       try {
         await call.query;
-        LoadingBarService.instance?.finish();
+        LoadingBarService.finish();
       } catch (error) {
-        LoadingBarService.instance?.error();
+        LoadingBarService.error();
         throw error;
       } finally {
         clearTimeout(timeout);

src/styles/z-index.scss

@@ -3,6 +3,8 @@ $default: 0;
 $in-front: 1;
 $layer-1: 10;
 $layer-2: 100;
-$layer-3: 1000;
-$layer-ui: 10000;
+$layer-3: 200;
+$layer-4: 300;
+$layer-5: 400;
+$layer-ui: 1000;
 $layer-max: 2147483647

src/views/options/index.html

@@ -13,6 +13,7 @@
 
 <style>
   body {
+    overscroll-behavior: none;
     display: flex;
     margin: 0;
     color: rgb(235 235 235 / 64%);

src/web/define-component.ts

@@ -10,7 +10,7 @@ export const defineComponent = async (options: DefineOption = {}, component: Web
     console.warn(`Custom element '${component}' is already defined.`);
   } else {
     const [{ createElementInstance }, { lazyComponent }] = await Promise.all([import('~/web/create-wc'), import('~/utils/lazy.utils')]);
-    const ContainerComponent = lazyComponent(() => import('~/components/web/ContainerComponent.ce.vue'));
+    const ContainerComponent = lazyComponent(() => import('~/components/container/ContainerComponent.ce.vue'));
     const TraktExtensionWc = createElementInstance(ContainerComponent, { name: component, ...options });
     customElements.define(component, TraktExtensionWc);
   }