feat(links): adds open links in background toggle

Author: dvcol

src/components/common/list/ListItemPanel.vue

@@ -16,7 +16,7 @@ import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
 import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.model';
 
 import { useShowStore } from '~/stores/data/show.store';
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils';
 import { deCapitalise } from '~/utils/string.utils';
 
@@ -92,7 +92,7 @@ const tooltipOptions = computed<PopoverProps>(() => ({
   delay: 500,
 }));
 
-const { openTab } = useExtensionSettingsStore();
+const { openTab } = useLinksStore();
 const onTagClick = (url?: string) => {
   if (!url) return;
   openTab(url);

src/components/views/panel/MoviePanel.vue

@@ -22,7 +22,7 @@ import {
   useListStore,
 } from '~/stores/data/list.store';
 import { useMovieStore, useMovieStoreRefs } from '~/stores/data/movie.store';
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils';
 import { deCapitalise } from '~/utils/string.utils';
 
@@ -191,7 +191,7 @@ const titleUrl = computed(() => {
   });
 });
 
-const { openTab } = useExtensionSettingsStore();
+const { openTab } = useLinksStore();
 </script>
 
 <template>

src/components/views/panel/PanelDetail.vue

@@ -5,7 +5,7 @@ import type { PropType } from 'vue';
 import type { TagLink } from '~/models/tag.model';
 
 import TagLinkComponent from '~/components/common/buttons/TagLink.vue';
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { useLinksStore } from '~/stores/settings/links.store';
 
 defineProps({
   label: {
@@ -34,7 +34,7 @@ defineProps({
   },
 });
 
-const { openTab } = useExtensionSettingsStore();
+const { openTab } = useLinksStore();
 </script>
 
 <template>

src/components/views/panel/PanelOverview.vue

@@ -2,7 +2,7 @@
 import { NFlex, NH4, NSkeleton } from 'naive-ui';
 
 import TitleLink from '~/components/common/buttons/TitleLink.vue';
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { useLinksStore } from '~/stores/settings/links.store';
 
 defineProps({
   title: {
@@ -23,7 +23,7 @@ defineProps({
   },
 });
 
-const { openTab } = useExtensionSettingsStore();
+const { openTab } = useLinksStore();
 </script>
 
 <template>

src/components/views/panel/PersonPanel.vue

@@ -11,7 +11,7 @@ import PersonPanelOverview from '~/components/views/panel/PersonPanelOverview.vu
 
 import { ResolveExternalLinks } from '~/settings/external.links';
 import { usePersonStore } from '~/stores/data/person.store';
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils';
 import { deCapitalise } from '~/utils/string.utils';
 
@@ -63,7 +63,7 @@ const titleUrl = computed(() => {
   });
 });
 
-const { openTab } = useExtensionSettingsStore();
+const { openTab } = useLinksStore();
 </script>
 
 <template>

src/components/views/panel/ShowPanel.vue

@@ -22,7 +22,7 @@ import {
   useListStore,
 } from '~/stores/data/list.store';
 import { useShowStore } from '~/stores/data/show.store';
-import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
+import { useLinksStore } from '~/stores/settings/links.store';
 import { useI18n } from '~/utils';
 import { deCapitalise } from '~/utils/string.utils';
 
@@ -307,7 +307,7 @@ onMounted(() => {
   );
 });
 
-const { openTab } = useExtensionSettingsStore();
+const { openTab } = useLinksStore();
 </script>
 
 <template>

src/components/views/settings/SettingsCache.vue

@@ -19,9 +19,9 @@ const cacheOptions = Object.entries(CacheRetention).map(([key, value]) => ({
   value,
 }));
 
-const loading = reactive({});
+const loading = reactive<Record<string | number, boolean>>({});
 
-const onClick = async (fn: () => Promise<void>, index: number) => {
+const onClick = async (fn: () => unknown, index: number) => {
   loading[index] = true;
 
   try {
@@ -41,10 +41,10 @@ const evictScopes = [
     label: i18n('evict_progress'),
     click: () =>
       Promise.all([
-        TraktService.evict.progress.movies(),
-        TraktService.evict.progress.shows(),
-        TraktService.evict.collection.movies(),
-        TraktService.evict.collection.shows(),
+        TraktService.evict.progress.movie(),
+        TraktService.evict.progress.show(),
+        TraktService.evict.collection.movie(),
+        TraktService.evict.collection.show(),
       ]),
   },
   { label: i18n('evict_calendar'), click: TraktService.evict.calendar },
@@ -57,8 +57,8 @@ const evictScopes = [
         TraktService.evict.favorites(),
         TraktService.evict.list(),
         TraktService.evict.lists(),
-        TraktService.evict.collection.movies(),
-        TraktService.evict.collection.shows(),
+        TraktService.evict.collection.movie(),
+        TraktService.evict.collection.show(),
       ]),
   },
   { label: i18n('evict_search'), click: TraktService.evict.search },
@@ -95,6 +95,7 @@ const container = ref();
     >
       <NSelect
         v-model:value="tmdbCacheRetention"
+        class="form-select"
         :to="container"
         :options="cacheOptions"
       />

src/components/views/settings/SettingsLinks.vue

@@ -30,7 +30,7 @@ import { useI18n } from '~/utils';
 
 const i18n = useI18n('settings', 'links');
 
-const { linkDictionary, aliasEnabled } = useLinksStoreRefs();
+const { linkDictionary, aliasEnabled, openLinkInBackground } = useLinksStoreRefs();
 const { addLink, removeLink } = useLinksStore();
 
 const form = reactive<CustomLinkDictionary>(structuredClone(toRaw(linkDictionary.value)));
@@ -113,6 +113,15 @@ const containerRef = ref<HTMLDivElement>();
         <template #unchecked>{{ i18n('hide', 'common', 'button') }}</template>
       </NSwitch>
     </NFormItem>
+    <NFormItem label-placement="left" :show-feedback="false">
+      <template #label>
+        <span class="form-header">{{ i18n('label_open_in_background') }}</span>
+      </template>
+      <NSwitch v-model:value="openLinkInBackground" class="form-header-switch">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </NFormItem>
 
     <!--  Content  -->
     <NForm ref="formRef" :model="form">

src/i18n/en/common/button.json

@@ -34,5 +34,13 @@
   "common__button__evict": {
     "message": "Evict cache data",
     "description": "Button to evict an item from cache."
+  },
+  "common__button__on": {
+    "message": "On",
+    "description": "Button to turn on an item."
+  },
+  "common__button__off": {
+    "message": "Off",
+    "description": "Button to turn off an item."
   }
 }

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

@@ -26,5 +26,9 @@
   "settings__links__confirm_remove": {
     "message": "Remove this custom link?",
     "description": "Confirmation message for removing a custom link"
+  },
+  "settings__links__label_open_in_background": {
+    "message": "Open links in background (popup stay active)",
+    "description": "Label for the open in new tab checkbox"
   }
 }

src/stores/settings/extension.store.ts

@@ -3,13 +3,11 @@ import { computed, reactive, ref, toRaw } from 'vue';
 
 import { TraktService } from '~/services/trakt.service';
 import { storage } from '~/utils/browser/browser-storage.utils';
-import { createTab } from '~/utils/browser/browser.utils';
 import { CacheRetention } from '~/utils/cache.utils';
 import { debounce } from '~/utils/debounce.utils';
 
 type ExtensionSettings = {
-  openLinksInNewTab: boolean;
-  cacheRetention: number;
+  cacheRetention: CacheRetentionState;
   restoreRoute: boolean;
   progressTab: boolean;
   logLevel: string;
@@ -28,7 +26,6 @@ const DefaultCacheRetention: CacheRetentionState = {
 } as const;
 
 export const useExtensionSettingsStore = defineStore('settings.extension', () => {
-  const openLinksInNewTab = ref(true);
   const cacheRetention = reactive(DefaultCacheRetention);
   const restoreRoute = ref(true);
   const progressTab = ref(false);
@@ -37,7 +34,6 @@ export const useExtensionSettingsStore = defineStore('settings.extension', () =>
 
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
-    openLinksInNewTab.value = true;
     restoreRoute.value = true;
     progressTab.value = false;
     logLevel.value = 'info';
@@ -46,7 +42,6 @@ export const useExtensionSettingsStore = defineStore('settings.extension', () =>
   const saveState = debounce(
     () =>
       storage.sync.set('settings.extension', {
-        openLinksInNewTab: openLinksInNewTab.value,
         cacheRetention: toRaw(cacheRetention),
         restoreRoute: restoreRoute.value,
         progressTab: progressTab.value,
@@ -60,13 +55,12 @@ export const useExtensionSettingsStore = defineStore('settings.extension', () =>
     if (retention.tmdb !== undefined) cacheRetention.tmdb = retention.tmdb;
     if (retention.tvdb !== undefined) cacheRetention.tvdb = retention.tvdb;
     TraktService.changeRetention(cacheRetention);
-    if (persist) saveState().catch(err => console.error('Failed to save extension settings', { value, err }));
+    if (persist) saveState().catch(err => console.error('Failed to save extension settings', { retention, err }));
   };
 
   const restoreState = async () => {
     const restored = await storage.sync.get<ExtensionSettings>('settings.extension');
 
-    if (restored?.openLinksInNewTab !== undefined) openLinksInNewTab.value = restored.openLinksInNewTab;
     if (restored?.cacheRetention !== undefined) setRetention(restored.cacheRetention, false);
     if (restored?.restoreRoute !== undefined) restoreRoute.value = restored.restoreRoute;
     if (restored?.progressTab !== undefined) progressTab.value = restored.progressTab;
@@ -77,18 +71,11 @@ export const useExtensionSettingsStore = defineStore('settings.extension', () =>
     await restoreState();
   };
 
-  const openTab = (url?: string) => {
-    if (!url) return;
-    createTab({ url, active: openLinksInNewTab.value });
-  };
-
   return {
     initExtensionSettingsStore,
     saveState,
     clearState,
     restoreRoute,
-    openLinksInNewTab,
-    openTab,
     progressTab,
     logLevel,
     traktCacheRetention: computed({

src/stores/settings/links.store.ts

@@ -4,6 +4,7 @@ import { computed, reactive, ref, type Ref } from 'vue';
 import type { TagLink } from '~/models/tag.model';
 
 import { storage } from '~/utils/browser/browser-storage.utils';
+import { createTab } from '~/utils/browser/browser.utils';
 import { debounce } from '~/utils/debounce.utils';
 
 export const CustomLinkScope = {
@@ -52,8 +53,14 @@ export type CustomLinkDictionary = Record<number, CustomLink>;
 type CustomLinkScopeDictionary = Partial<Record<CustomLinkScopes, CustomLinkDictionary>>;
 type AliasDictionary = Partial<Record<AliasScope, Record<string, string>>>;
 
+type LinksStoreState = {
+  enabled: boolean;
+  backgroundLink: boolean;
+};
+
 export const useLinksStore = defineStore('settings.links', () => {
   const enabled = ref(false);
+  const backgroundLink = ref(false);
   const aliasDictionary = reactive<AliasDictionary>({});
 
   const linkDictionary = reactive<CustomLinkDictionary>({});
@@ -65,7 +72,7 @@ export const useLinksStore = defineStore('settings.links', () => {
     Object.assign(linkScopeDictionary, {});
   };
 
-  const saveState = debounce(() => storage.sync.set('settings.links', { enabled: enabled.value }), 1000);
+  const saveState = debounce(() => storage.sync.set('settings.links', { enabled: enabled.value, backgroundLink: backgroundLink.value }), 1000);
   const saveAlias = debounce(() => storage.sync.set('settings.links.aliases', aliasDictionary), 1000);
   const saveLinks = debounce(() => storage.sync.set('settings.links.links', linkDictionary), 1000);
 
@@ -88,25 +95,26 @@ export const useLinksStore = defineStore('settings.links', () => {
 
     // add new scopes
     if (link.scopes) Object.values(link.scopes).forEach(scope => addToScope(scope, link));
-    saveLinks().catch(console.error);
+    saveLinks().catch(err => console.error('Failed to save link', { link, err }));
   };
 
   const removeLink = (id: CustomLink['id']) => {
     const link = linkDictionary[id];
     if (!link) return;
     if (linkDictionary[link.id]) delete linkDictionary[link.id];
     if (link.scopes) Object.values(link.scopes).forEach(scope => removeFromScope(scope, link.id));
-    saveLinks().catch(console.error);
+    saveLinks().catch(err => console.error('Failed to save link', { id, err }));
   };
 
   const restoreState = async () => {
-    const [restoredState, restoredAliases, restoredLinks] = await Promise.all([
-      storage.sync.get<{ enabled: boolean }>('settings.links'),
+    const [restoredState, restoredAliases, restoredLinks]: [LinksStoreState, AliasDictionary, CustomLinkDictionary] = await Promise.all([
+      storage.sync.get<LinksStoreState>('settings.links'),
       storage.sync.get<AliasDictionary>('settings.links.aliases'),
       storage.sync.get<CustomLinkDictionary>('settings.links.links'),
     ]);
 
-    if (restoredState.enabled !== undefined) enabled.value = restoredState.enabled;
+    if (restoredState?.enabled !== undefined) enabled.value = restoredState.enabled;
+    if (restoredState?.backgroundLink !== undefined) backgroundLink.value = restoredState.backgroundLink;
     if (restoredAliases) Object.assign(aliasDictionary, restoredAliases);
     if (restoredLinks) {
       Object.values(restoredLinks)
@@ -140,11 +148,25 @@ export const useLinksStore = defineStore('settings.links', () => {
     get: () => enabled.value,
     set: (value: boolean) => {
       enabled.value = value;
-      saveState().catch(err => console.error('Failed to save state', { value, err }));
+      saveState().catch(err => console.error('Failed to save link settings', { value, err }));
+    },
+  });
+
+  const openLinkInBackground = computed({
+    get: () => backgroundLink.value,
+    set: (value: boolean) => {
+      backgroundLink.value = value;
+      console.info('Open links in new tab', value);
+      saveState().catch(err => console.error('Failed to save link settings.', { value, err }));
     },
   });
 
-  return { initLinksStore, clearState, linkDictionary, addLink, removeLink, getLinks, getAlias, aliasEnabled };
+  const openTab = (url?: string) => {
+    if (!url) return;
+    createTab({ url, active: !openLinkInBackground.value });
+  };
+
+  return { initLinksStore, clearState, linkDictionary, addLink, removeLink, getLinks, getAlias, aliasEnabled, openLinkInBackground, openTab };
 });
 
 export const useLinksStoreRefs = () => storeToRefs(useLinksStore());