feat(badge): adds calendar badge summary

Author: dvcol

package.json

@@ -52,11 +52,11 @@
   },
   "dependencies": {
     "@dvcol/base-http-client": "^1.10.0",
-    "@dvcol/common-utils": "^1.7.0",
+    "@dvcol/common-utils": "^1.8.0",
     "@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.2.0",
+    "@dvcol/web-extension-utils": "^3.3.0",
     "@vue/devtools": "^7.0.15",
     "iso-3166-2": "^1.0.0",
     "naive-ui": "^2.38.1",

pnpm-lock.yaml

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { NSwitch } from 'naive-ui';
+
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
+import { useBadgeStoreRefs } from '~/stores/settings/badge.store';
+import { useI18n } from '~/utils/i18n.utils';
+
+const i18n = useI18n('settings', 'badge');
+
+const { enableBadge } = useBadgeStoreRefs();
+</script>
+
+<template>
+  <div class="badge-container">
+    <!--  Enable  -->
+    <SettingsFormItem :label="i18n('label_enable_badge')">
+      <NSwitch v-model:value="enableBadge" class="form-switch">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.badge-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+</style>

src/components/views/settings/SettingsBadge.vue

@@ -5,13 +5,15 @@ import { type Component, onDeactivated, type Ref, ref } from 'vue';
 
 import SettingsAccount from '~/components/views/settings/SettingsAccount.vue';
 import SettingsActivity from '~/components/views/settings/SettingsActivity.vue';
+import SettingsBadge from '~/components/views/settings/SettingsBadge.vue';
 import SettingsCache from '~/components/views/settings/SettingsCache.vue';
 import SettingsExport from '~/components/views/settings/SettingsExport.vue';
 import SettingsLinks from '~/components/views/settings/SettingsLinks.vue';
 import SettingsLogs from '~/components/views/settings/SettingsLogs.vue';
 import SettingsMenus from '~/components/views/settings/SettingsMenus.vue';
 import SettingsTabs from '~/components/views/settings/SettingsTabs.vue';
 import SettingsWatching from '~/components/views/settings/SettingsWatching.vue';
+
 import { useI18n } from '~/utils/i18n.utils';
 
 const i18n = useI18n('settings');
@@ -29,6 +31,7 @@ const sections: Section[] = [
   { title: 'menu__menus', reference: ref(), component: SettingsMenus },
   { title: 'menu__watching', reference: ref(), component: SettingsWatching },
   { title: 'menu__activity', reference: ref(), component: SettingsActivity },
+  { title: 'menu__badge', reference: ref(), component: SettingsBadge },
   { title: 'menu__cache', reference: ref(), component: SettingsCache },
   { title: 'menu__export', reference: ref(), component: SettingsExport },
   { title: 'menu__logs', reference: ref(), component: SettingsLogs },

src/components/views/settings/SettingsComponent.vue

@@ -0,0 +1,6 @@
+{
+  "settings__badge__label_enable_badge": {
+    "message": "Enable badge (daily calendar releases)",
+    "description": "Label for enabling badge."
+  }
+}

src/i18n/en/settings/settings-badge.json

@@ -34,5 +34,9 @@
   "settings__menu__activity": {
     "message": "Activity",
     "description": "Activity ui menu item"
+  },
+  "settings__menu__badge": {
+    "message": "Badge",
+    "description": "Badge ui menu item"
   }
 }

src/i18n/en/settings/settings-menu.json

@@ -4,15 +4,28 @@ import type { ContextMenuIds } from '~/models/context/context-menu.model';
 export const MessageType = {
   ContextMenu: 'context-menu',
   VersionUpdate: 'version-update',
+  AppReady: 'app-ready',
+  BadgeUpdate: 'badge-update',
 } as const;
 
 export type MessageTypes = (typeof MessageType)[keyof typeof MessageType];
 
+export type BadgeUpdatePayload = {
+  title?: string;
+  text?: string;
+  color?: string;
+  backgroundColor?: string;
+};
+
 /**
  * Type union of possible message payloads
  */
 export type MessagePayload<T extends MessageTypes = MessageTypes> = T extends typeof MessageType.ContextMenu
   ? Record<ContextMenuIds, boolean>
   : T extends typeof MessageType.VersionUpdate
     ? VersionUpdateDetails & { date: number }
-    : MessageTypes;
+    : T extends typeof MessageType.AppReady
+      ? boolean
+      : T extends typeof MessageType.BadgeUpdate
+        ? BadgeUpdatePayload
+        : MessageTypes;

src/models/message/message-type.model.ts

@@ -1,3 +1,4 @@
+import { setBadgeBackgroundColor, setBadgeText, setBadgeTextColor, setTitle } from '@dvcol/web-extension-utils/chrome/action';
 import { onContextMenuClicked } from '@dvcol/web-extension-utils/chrome/context';
 import { onInstalledEvent, onVersionUpdate } from '@dvcol/web-extension-utils/chrome/runtime';
 
@@ -46,3 +47,16 @@ try {
 } catch (error) {
   console.error('Failed to handle context menu click event', error);
 }
+
+try {
+  onMessage(MessageType.BadgeUpdate, async message => {
+    if (!message.payload) return;
+    const { title, text, color, backgroundColor } = message.payload;
+    if (title !== undefined) setTitle?.({ title });
+    if (text !== undefined) setBadgeText?.({ text });
+    if (color !== undefined) setBadgeTextColor?.({ color });
+    if (backgroundColor !== undefined) setBadgeBackgroundColor?.({ color: backgroundColor });
+  });
+} catch (error) {
+  console.error('Failed to handle badge update message', error);
+}

src/scripts/background/index.ts

@@ -1,6 +1,9 @@
 import { defineStore, storeToRefs } from 'pinia';
 import { ref } from 'vue';
 
+import { MessageType } from '~/models/message/message-type.model';
+import { sendMessage } from '~/utils/browser/browser-message.utils';
+
 export const useAppStateStore = defineStore('app.state', () => {
   const isAppReady = ref(false);
   const panelOpen = ref(false);
@@ -14,10 +17,11 @@ export const useAppStateStore = defineStore('app.state', () => {
     }),
   );
 
-  const setAppReady = (ready: boolean) => {
+  const setAppReady = async (ready: boolean) => {
     isAppReady.value = ready;
     resolve(ready);
     waitAppReady.value = Promise.resolve(ready);
+    return sendMessage({ type: MessageType.AppReady, payload: ready });
   };
 
   return { isAppReady, setAppReady, waitAppReady, panelOpen, panelDirty, footerOpen };

src/stores/app-state.store.ts

@@ -4,7 +4,6 @@ import { defineStore, storeToRefs } from 'pinia';
 import { computed, reactive, ref } from 'vue';
 
 import { ListScrollItemType } from '~/models/list-scroll.model';
-
 import { ErrorService } from '~/services/error.service';
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
@@ -25,6 +24,22 @@ type CalendarState = {
   extended?: boolean;
 };
 
+export const fetchCalendarData = async (query: TraktCalendarQuery): Promise<CalendarItem[]> => {
+  const [shows, movies] = await Promise.all([TraktService.calendar(query, 'shows'), TraktService.calendar(query, 'movies')]);
+  return [
+    ...(shows as TraktCalendarShow[]).map(show => ({
+      ...show,
+      id: show.episode.ids.trakt ?? show.show.ids.trakt,
+      date: new Date(show.first_aired),
+    })),
+    ...(movies as TraktCalendarMovie[]).map(movie => ({
+      ...movie,
+      id: movie.movie.ids.trakt,
+      date: new Date(movie.released),
+    })),
+  ].sort((a, b) => a.date.getTime() - b.date.getTime());
+};
+
 export const useCalendarStore = defineStore(CalendarStoreConstants.Store, () => {
   const firstLoad = ref(true);
   const loading = ref(true);
@@ -104,21 +119,8 @@ export const useCalendarStore = defineStore(CalendarStoreConstants.Store, () =>
     if (extended.value) query.extended = TraktApiExtended.Full;
 
     try {
-      const [shows, movies] = await Promise.all([TraktService.calendar(query, 'shows'), TraktService.calendar(query, 'movies')]);
+      const newData: CalendarItem[] = await fetchCalendarData(query);
       delete calendarErrors[JSON.stringify(query)];
-      const newData: CalendarItem[] = [
-        ...(shows as TraktCalendarShow[]).map(show => ({
-          ...show,
-          id: show.episode.ids.trakt ?? show.show.ids.trakt,
-          date: new Date(show.first_aired),
-        })),
-        ...(movies as TraktCalendarMovie[]).map(movie => ({
-          ...movie,
-          id: movie.movie.ids.trakt,
-          date: new Date(movie.released),
-        })),
-      ].sort((a, b) => a.date.getTime() - b.date.getTime());
-
       const spacedData = spaceDate(newData, startDate, endDate);
 
       if (mode === 'reload') {