feat(progress): adds mismatch warning and improve stale data detection

Author: dvcol

package.json

@@ -56,7 +56,7 @@
     "@dvcol/tmdb-http-client": "^1.2.3",
     "@dvcol/trakt-http-client": "^1.4.5",
     "@dvcol/tvdb-http-client": "^1.1.3",
-    "@dvcol/web-extension-utils": "^3.1.0",
+    "@dvcol/web-extension-utils": "^3.2.0",
     "@vue/devtools": "^7.0.15",
     "iso-3166-2": "^1.0.0",
     "naive-ui": "^2.38.1",

pnpm-lock.yaml

@@ -44,7 +44,7 @@ export const manifest: Manifest.WebExtensionManifest = {
     service_worker: 'scripts/background.js',
     type: 'module',
   },
-  permissions: ['storage', 'tabs', 'contextMenus'],
+  permissions: ['storage', 'tabs', 'contextMenus', 'cookies'],
   web_accessible_resources: [
     {
       resources: ['/views/options/index.html'],

scripts/manifest.ts

@@ -22,6 +22,7 @@ import IconLogOut from '~/components/icons/IconLogOut.vue';
 
 import { Route } from '~/models/router.model';
 import { Logger } from '~/services/logger.service';
+import { NavbarService } from '~/services/navbar.service';
 import { TraktService } from '~/services/trakt.service';
 import { ExternaLinks } from '~/settings/external.links';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
@@ -33,7 +34,7 @@ import { useI18n } from '~/utils/i18n.utils';
 const i18n = useI18n('navbar', 'settings');
 const router = useRouter();
 
-const { user, userSetting, userSettings } = useUserSettingsStoreRefs();
+const { userSetting, userSettings } = useUserSettingsStoreRefs();
 const { enabledRoutes } = useExtensionSettingsStoreRefs();
 
 const avatar = computed(() => userSetting.value?.user?.images?.avatar?.full);
@@ -137,6 +138,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     size="small"
     class="settings-dropdown"
     :style="{ '--tab-count': enabledRoutes.length + 1 }"
+    :on-update:show="(visible: boolean) => (NavbarService.dropdown.value = visible)"
     @select="onSelect"
   >
     <NFlex justify="space-around" align="center" :wrap="false">

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -15,6 +15,7 @@ import LoadingBarProvider from '~/components/container/LoadingBarProvider.vue';
 import MessageProvider from '~/components/container/MessageProvider.vue';
 import NotificationProvider from '~/components/container/NotificationProvider.vue';
 import { NavbarService } from '~/services/navbar.service';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { lazyComponent } from '~/utils/lazy.utils';
 import { addCustomProgressProperty } from '~/utils/style.utils';
 
@@ -27,16 +28,20 @@ const override: GlobalThemeOverrides = {
   // TODO red palette
 };
 
-const { drawer } = NavbarService;
-const drawerOpen = NavbarService.open;
+const { drawer, open, dropdown } = NavbarService;
+const { enabledRoutes } = useExtensionSettingsStoreRefs();
 
 const root = ref<HTMLElement>();
 
 onBeforeMount(() => addCustomProgressProperty());
 </script>
 
 <template>
-  <div id="trakt-extension-root" ref="root">
+  <div
+    id="trakt-extension-root"
+    ref="root"
+    :style="{ '--tab-count': enabledRoutes.length + 1 }"
+  >
     <NConfigProvider :theme="theme" :theme-overrides="override" abstract>
       <AppComponent />
 
@@ -51,11 +56,7 @@ onBeforeMount(() => addCustomProgressProperty());
         :to="root"
         :max="2"
         :container-class="
-          [
-            'message-container',
-            drawer ? 'has-drawer' : '',
-            drawerOpen ? 'drawer-visible' : '',
-          ]
+          ['message-container', drawer ? 'has-drawer' : '', open ? 'drawer-visible' : '']
             .filter(Boolean)
             .join(' ')
         "
@@ -70,7 +71,8 @@ onBeforeMount(() => addCustomProgressProperty());
           [
             'notification-container',
             drawer ? 'has-drawer' : '',
-            drawerOpen ? 'drawer-visible' : '',
+            open ? 'drawer-visible' : '',
+            dropdown ? 'dropdown-visible' : '',
           ]
             .filter(Boolean)
             .join(' ')
@@ -124,23 +126,45 @@ onBeforeMount(() => addCustomProgressProperty());
 }
 
 .notification-container.n-notification-container.n-notification-container {
-  @include layout.navbar-transition($transition: top);
+  @include layout.navbar-transition(
+    #{top layout.$navbar-transition,
+    right layout.$navbar-transition},
+    #{top layout.$navbar-transition-visible,
+    right layout.$navbar-transition-visible},
+    #{layout.$navbar-transition-delay,
+    layout.$navbar-transition-delay-visible}
+  );
 
   top: layout.$header-navbar-height;
 
   &.drawer-visible {
     top: layout.$header-open-drawer-height;
   }
+
+  &.dropdown-visible {
+    right: max(calc(100vw / var(--tab-count)), 8rem);
+  }
 }
 
 .message-container.n-message-container.n-message-container {
-  @include layout.navbar-transition($transition: top);
+  @include layout.navbar-transition(
+    #{top layout.$navbar-transition,
+    right layout.$navbar-transition},
+    #{top layout.$navbar-transition-visible,
+    right layout.$navbar-transition-visible},
+    #{layout.$navbar-transition-delay,
+    layout.$navbar-transition-delay-visible}
+  );
 
   top: calc(#{layout.$header-navbar-height} + 12px);
 
   &.drawer-visible {
     top: calc(#{layout.$header-open-drawer-height} + 12px);
   }
+
+  &.dropdown-visible {
+    right: max(calc(100vw / var(--tab-count)), 8rem);
+  }
 }
 
 .n-popover.n-popconfirm {

src/components/container/ContainerComponent.ce.vue

@@ -1,19 +1,22 @@
 <script lang="ts" setup>
-import { NFlex } from 'naive-ui';
-import { onMounted, Transition, watch } from 'vue';
+import { NFlex, type NotificationReactive } from 'naive-ui';
+import { onMounted, ref, Transition, watch } from 'vue';
 
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import { useBackToTop } from '~/components/common/buttons/use-back-to-top';
 import ListScroll from '~/components/common/list/ListScroll.vue';
 
 import LoginCard from '~/components/views/login/LoginCard.vue';
 import { usePanelItem } from '~/components/views/panel/use-panel-item';
+import { NotificationService } from '~/services/notification.service';
 import { ExternaLinks } from '~/settings/external.links';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useProgressStore, useProgressStoreRefs } from '~/stores/data/progress.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
+import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils/i18n.utils';
 import { watchUserChange } from '~/utils/store.utils';
+import { getSessionUser } from '~/utils/trakt-service.utils';
 
 const i18n = useI18n('progress');
 
@@ -23,11 +26,6 @@ const { progress, loading, loggedOut } = useProgressStoreRefs();
 const { fetchProgress, clearState } = useProgressStore();
 const { isWatching } = useWatchingStoreRefs();
 
-watchUserChange({
-  fetch: fetchProgress,
-  clear: clearState,
-});
-
 onMounted(() => {
   watch(panelOpen, async value => {
     if (!value && panelDirty.value) await fetchProgress();
@@ -38,6 +36,34 @@ onMounted(() => {
   });
 });
 
+const { user } = useUserSettingsStoreRefs();
+const unSub = ref<() => void>();
+const notification = ref<NotificationReactive>();
+
+watchUserChange({
+  fetch: fetchProgress,
+  clear: clearState,
+  activated: async () => {
+    await fetchProgress();
+    unSub.value = watch(
+      user,
+      async _user => {
+        const session = await getSessionUser();
+        if (notification.value) notification.value.destroy();
+        if (!session || _user === session) return;
+        notification.value = NotificationService.userMismatch({ user: _user, session });
+      },
+      {
+        immediate: true,
+      },
+    );
+  },
+  deactivated: () => {
+    unSub.value?.();
+    notification.value?.destroy();
+  },
+});
+
 const { scrolled, listRef, onClick } = useBackToTop();
 const { onItemClick } = usePanelItem();
 </script>

src/components/views/progress/ProgressComponent.vue

@@ -10,5 +10,9 @@
   "notification__release_notes": {
     "message": "Release notes",
     "description": "The text of the link to the release notes."
+  },
+  "notification__sign_out": {
+    "message": "Sign Out",
+    "description": "The text of the link to the login page."
   }
 }

src/i18n/en/notification/notification.json

@@ -3,4 +3,5 @@ import { ref } from 'vue';
 export class NavbarService {
   static readonly open = ref(false);
   static readonly drawer = ref(false);
+  static readonly dropdown = ref(false);
 }

src/services/navbar.service.ts

@@ -5,7 +5,7 @@ import { NButton } from 'naive-ui';
 import { h } from 'vue';
 
 import type { Mutable } from '@dvcol/common-utils/common';
-import type { NotificationOptions, useMessage, useNotification } from 'naive-ui';
+import type { ButtonProps, NotificationOptions, useMessage, useNotification } from 'naive-ui';
 
 import type { MessagePayload, MessageType } from '~/models/message/message-type.model';
 
@@ -15,6 +15,8 @@ import { useI18n } from '~/utils/i18n.utils';
 type NotificationApi = ReturnType<typeof useNotification>;
 type MessageApi = ReturnType<typeof useMessage>;
 
+const renderButton = (label: string, props: ButtonProps) => () => h(NButton, { tertiary: true, type: 'info', ...props }, { default: () => label });
+
 export class NotificationService {
   static notification: NotificationApi;
   static message: MessageApi;
@@ -44,21 +46,30 @@ export class NotificationService {
       content: i18n('release_content'),
       meta: new Date(payload.date).toLocaleDateString(),
       duration: 10 * 1000,
-      action: () =>
-        h(
-          NButton,
-          {
-            tertiary: true,
-            type: 'info',
-            onClick: () => {
-              createTab({ url: ExternaLinks.release });
-              notification.destroy();
-            },
-          },
-          {
-            default: () => i18n('release_notes'),
-          },
-        ),
+      action: renderButton(i18n('release_notes'), {
+        onClick: () => {
+          createTab({ url: ExternaLinks.release });
+          notification.destroy();
+        },
+      }),
+    });
+    return notification;
+  }
+
+  static userMismatch({ user, session }: { user: string; session: string }) {
+    const i18n = useI18n('notification');
+    const notification = NotificationService.notification.warning({
+      title: 'Warning: user mismatch',
+      description: `Displaying ${session} instead of ${user}`,
+      content: 'Current user does not match the session. \nPlease log out and log in from trakt.tv.',
+      meta: new Date().toLocaleDateString(),
+      action: renderButton(i18n('sign_out'), {
+        type: 'warning',
+        onClick: () => {
+          createTab({ url: ExternaLinks.trakt.signOut });
+          notification.destroy();
+        },
+      }),
     });
     return notification;
   }