feat(badge): adds support for progress badge

Author: dvcol

src/components/views/settings/SettingsBadge.vue

@@ -1,18 +1,34 @@
 <script lang="ts" setup>
 import { chromeRuntimeId } from '@dvcol/web-extension-utils/chrome/runtime';
-import { NSwitch } from 'naive-ui';
+import { NSelect, NSwitch } from 'naive-ui';
+
+import { computed, ref } from 'vue';
 
 import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
-import { useBadgeStoreRefs } from '~/stores/settings/badge.store';
+import { BadgeMode, useBadgeStoreRefs } from '~/stores/settings/badge.store';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { useI18n } from '~/utils/i18n.utils';
+import { toSnakeCase } from '~/utils/string.utils';
 
 const i18n = useI18n('settings', 'badge');
 
-const { enableBadge } = useBadgeStoreRefs();
+const { enableBadge, badgeMode } = useBadgeStoreRefs();
+
+const { isProgressEnabled } = useExtensionSettingsStoreRefs();
+
+const options = computed(() =>
+  Object.entries(BadgeMode).map(([key, value]) => ({
+    label: i18n(toSnakeCase(key), 'common', 'badge', 'mode'),
+    value,
+    disabled: !isProgressEnabled.value && value === BadgeMode.Progress,
+  })),
+);
+
+const container = ref();
 </script>
 
 <template>
-  <div class="badge-container">
+  <div ref="container" class="badge-container">
     <!--  Enable  -->
     <SettingsFormItem :label="i18n('label_enable_badge')">
       <NSwitch
@@ -24,6 +40,17 @@ const { enableBadge } = useBadgeStoreRefs();
         <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
       </NSwitch>
     </SettingsFormItem>
+
+    <!--  Badge Mode  -->
+    <SettingsFormItem :label="i18n('label_badge_mode')">
+      <NSelect
+        v-model:value="badgeMode"
+        class="form-select"
+        :to="container"
+        :options="options"
+        :disabled="!enableBadge"
+      />
+    </SettingsFormItem>
   </div>
 </template>
 
@@ -33,4 +60,8 @@ const { enableBadge } = useBadgeStoreRefs();
   flex-direction: column;
   gap: 1.5rem;
 }
+
+.form-select {
+  min-width: 8rem;
+}
 </style>

src/components/views/settings/SettingsWatching.vue

@@ -7,17 +7,12 @@ import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
 import { PollingIntervals } from '~/models/polling.model';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useI18n } from '~/utils/i18n.utils';
+import { toSnakeCase } from '~/utils/string.utils';
 
 const i18n = useI18n('settings', 'watching');
 
 const { polling, override } = useWatchingStoreRefs();
 
-const toSnakeCase = (str: string) =>
-  str
-    .replace(/([A-Z])/g, '_$1')
-    .toLowerCase()
-    .slice(1);
-
 const options = Object.entries(PollingIntervals).map(([key, value]) => ({
   label: i18n(toSnakeCase(key), 'common', 'polling', 'interval'),
   value,

src/i18n/en/common/badge-mode.json

@@ -0,0 +1,10 @@
+{
+  "common__badge__mode__calendar": {
+    "message": "Calendar",
+    "description": "Badge mode calendar."
+  },
+  "common__badge__mode__progress": {
+    "message": "Progress",
+    "description": "Badge mode progress."
+  }
+}

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

@@ -2,5 +2,9 @@
   "settings__badge__label_enable_badge": {
     "message": "Enable badge (daily calendar releases)",
     "description": "Label for enabling badge."
+  },
+  "settings__badge__label_badge_mode": {
+    "message": "Badge mode",
+    "description": "Label for badge mode."
   }
 }

src/models/list-scroll.model.ts

@@ -87,7 +87,7 @@ export const ListScrollItemType = {
   placeholder: 'placeholder',
 } as const;
 
-export type ListScrollItemMeta = {
+export type ListScrollItemMeta<T = { [key: string]: unknown }> = {
   source: ListScrollSourceItem | ProgressItem;
   ids: {
     movie?: Partial<TraktMovie['ids']>;
@@ -101,8 +101,7 @@ export type ListScrollItemMeta = {
     season?: number;
     episode?: number;
   };
-  [key: string]: unknown;
-};
+} & T;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- meta is intentionally weakly typed
 export type ListScrollItem<T extends Record<string, any> = ListScrollItemMeta> = Omit<PosterItem, 'type'> & {

src/stores/data/progress.store.ts

@@ -4,15 +4,24 @@ import { ref } from 'vue';
 
 import type { TraktEpisode, TraktShow } from '@dvcol/trakt-http-client/models';
 
+import type { ListScrollItem, ListScrollItemMeta, ListScrollSourceItem } from '~/models/list-scroll.model';
+
 import { getContent, getTags, getTitle } from '~/components/common/list/use-list-scroll';
-import { type ListScrollItem, type ListScrollSourceItem } from '~/models/list-scroll.model';
 import { type ProgressItem } from '~/models/progress.model';
 import { Logger } from '~/services/logger.service';
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { debounceLoading, useLoadingPlaceholder } from '~/utils/store.utils';
 
-type ProgressListItem = Omit<ListScrollItem, 'posterRef' | 'progressRef'>;
+export type ProgressListItem = Omit<
+  ListScrollItem<
+    ListScrollItemMeta<{
+      episode: ListScrollSourceItem['episode'];
+      show: ListScrollSourceItem['show'];
+    }>
+  >,
+  'posterRef' | 'progressRef'
+>;
 
 const titleRegex = /(.*)\s\d+x\d+\s"([^"]+)"/;
 
@@ -77,6 +86,11 @@ export const progressToListItem = (progress: ProgressItem, index: number): Progr
   };
 };
 
+export const fetchProgressData = async (): Promise<ProgressListItem[]> => {
+  const items = await TraktService.progress.onDeck();
+  return items.map<ProgressListItem>(progressToListItem);
+};
+
 export const useProgressStore = defineStore('data.progress', () => {
   const firstLoad = ref(true);
   const loading = ref(true);
@@ -100,8 +114,7 @@ export const useProgressStore = defineStore('data.progress', () => {
     loading.value = true;
     const timeout = debounceLoading(progress, loadingPlaceholder, true);
     try {
-      const items = await TraktService.progress.onDeck();
-      progress.value = items.map<ProgressListItem>(progressToListItem);
+      progress.value = await fetchProgressData();
     } catch (error) {
       progress.value = [];
       loading.value = false;

src/stores/data/releases.store.ts

@@ -189,7 +189,7 @@ export const useReleasesStore = defineStore(ReleasesStoreConstants.Store, () =>
 
       newData.sort((a: CalendarItem, b: CalendarItem) => a.date.getTime() - b.date.getTime());
 
-      const spacedData = spaceDate(newData, startDate, endDate);
+      const spacedData = spaceDate(newData, { startDate, endDate, days: days.value });
 
       if (mode === 'reload') {
         releases.value = [...spacedData];