feat(settings): rework context menu and add toggle settings

Author: dvcol

src/components/views/settings/SettingsComponent.vue

@@ -7,6 +7,7 @@ import SettingsAccount from '~/components/views/settings/SettingsAccount.vue';
 import SettingsCache from '~/components/views/settings/SettingsCache.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 { useI18n } from '~/utils';
 
@@ -22,6 +23,7 @@ const sections: Section[] = [
   { title: 'menu__account', reference: ref(), component: SettingsAccount },
   { title: 'menu__tabs', reference: ref(), component: SettingsTabs },
   { title: 'menu__links', reference: ref(), component: SettingsLinks },
+  { title: 'menu__menus', reference: ref(), component: SettingsMenus },
   { title: 'menu__cache', reference: ref(), component: SettingsCache },
   { title: 'menu__logs', reference: ref(), component: SettingsLogs },
 ];

src/components/views/settings/SettingsMenus.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { NSwitch } from 'naive-ui';
+
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
+import {
+  useContextMenuStore,
+  useContextMenuStoreRefs,
+} from '~/stores/settings/context-menu.store';
+import { useI18n } from '~/utils';
+
+const i18n = useI18n('settings', 'menus');
+
+const { enabledContextMenus } = useContextMenuStoreRefs();
+const { toggleContextMenu } = useContextMenuStore();
+</script>
+
+<template>
+  <div class="menus-container">
+    <!--  Enable tabs  -->
+    <SettingsFormItem
+      v-for="[id, state] of enabledContextMenus"
+      :key="id"
+      :label="i18n(`label_menu__${ id }`)"
+    >
+      <NSwitch :value="state" class="form-switch" @update:value="toggleContextMenu(id)">
+        <template #checked>{{ i18n('on', 'common', 'button') }}</template>
+        <template #unchecked>{{ i18n('off', 'common', 'button') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menus-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  .form-switch {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    min-width: 5rem;
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+  }
+}
+</style>

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

@@ -18,5 +18,9 @@
   "settings__menu__links": {
     "message": "Links",
     "description": "Links menu item"
+  },
+  "settings__menu__menus": {
+    "message": "Menus",
+    "description": "Context menus menu item"
   }
 }

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

@@ -0,0 +1,10 @@
+{
+  "settings__menus__label_menu__open_in_side_trakt": {
+    "message": "Open selection in Side Trakt",
+    "description": "Label to toggle the 'Open selection in Side Trakt' menu item"
+  },
+  "settings__menus__label_menu__add_to_search_history": {
+    "message": "Add selection to search history",
+    "description": "Label to toggle the 'Add selection to search history' menu item"
+  }
+}

src/models/context/context-menu-hooks.model.ts

@@ -0,0 +1,45 @@
+import type { RouteLocationNormalized } from 'vue-router';
+
+import { ContextMenuConstants, ContextMenuId, type ContextMenuIds, ContextMenus } from '~/models/context/context-menu.model';
+import { Route, RouterStorageKey } from '~/models/router.model';
+import { action } from '~/utils/browser/borwser-action.utils';
+import { context, type ContextMenuOnClickedData } from '~/utils/browser/browser-context.utils';
+import { runtime } from '~/utils/browser/browser-runtime.utils';
+import { storage } from '~/utils/browser/browser-storage.utils';
+import { createTab } from '~/utils/browser/browser.utils';
+
+const setLastRoute = (data: ContextMenuOnClickedData) => {
+  if (!data?.selectionText) return;
+  return storage.local.set(RouterStorageKey.LastRoute, {
+    name: Route.Search,
+    query: { search: data.selectionText },
+  } satisfies Partial<RouteLocationNormalized>);
+};
+
+const openPopup = async () => {
+  if (action?.openPopup) return action.openPopup();
+  if (!runtime) return;
+  await createTab({
+    url: runtime.getURL('views/options/index.html'),
+  });
+};
+
+export const ContextMenusHooks: Record<ContextMenuIds, (data: ContextMenuOnClickedData) => void | Promise<void>> = {
+  [ContextMenuId.OpenInSideTrakt]: async data => {
+    await setLastRoute(data);
+    await openPopup();
+  },
+  [ContextMenuId.AddToSearchHistory]: setLastRoute,
+} as const;
+
+export const installContextMenus = async (enabled?: Record<ContextMenuIds, boolean>) => {
+  if (!context) return;
+  if (!enabled) enabled = await storage.local.get<Record<ContextMenuIds, boolean>>(ContextMenuConstants.LocalEnabled);
+  if (!enabled) return;
+
+  await context.removeAll();
+
+  return (Object.entries(enabled) as [ContextMenuIds, boolean][])
+    .filter(([_, isEnabled]) => isEnabled)
+    .map(([id]) => context!.create(ContextMenus[id]));
+};

src/models/context/context-menu.model.ts

@@ -1,10 +1,13 @@
 export const ContextMenuId = {
-  OpenInSideTrakt: 'open-in-side-trakt',
-  AddToSearchHistory: 'add-to-search-history',
+  OpenInSideTrakt: 'open_in_side_trakt',
+  AddToSearchHistory: 'add_to_search_history',
 } as const;
 
 export type ContextMenuIds = (typeof ContextMenuId)[keyof typeof ContextMenuId];
 
+const contextMenuIdValues = new Set<string>(Object.values(ContextMenuId));
+export const isContextMenuId = (id: unknown): id is ContextMenuIds => typeof id === 'string' && contextMenuIdValues.has(id);
+
 export type ContextMenu = {
   id: ContextMenuIds;
   title: string;
@@ -23,3 +26,8 @@ export const ContextMenus: Record<ContextMenuIds, ContextMenu> = {
     contexts: ['selection'],
   },
 } as const;
+
+export const ContextMenuConstants = {
+  Store: 'settings.context-menu',
+  LocalEnabled: 'settings.context-menu.enabled',
+};

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

@@ -0,0 +1,3 @@
+export const MessageType = {
+  ContextMenu: 'context-menu',
+} as const;

src/scripts/background/index.ts

@@ -1,39 +1,26 @@
-import type { RouteLocationNormalized } from 'vue-router';
-
-import { ContextMenuId, ContextMenus } from '~/models/context/context-menu.model';
-import { Route, RouterStorageKey } from '~/models/router.model';
-import { action } from '~/utils/browser/borwser-action.utils';
+import { ContextMenusHooks, installContextMenus } from '~/models/context/context-menu-hooks.model';
+import { isContextMenuId } from '~/models/context/context-menu.model';
+import { MessageType } from '~/models/message/message-type.model';
 import { context } from '~/utils/browser/browser-context.utils';
 import { runtime } from '~/utils/browser/browser-runtime.utils';
-import { storage } from '~/utils/browser/browser-storage.utils';
-import { createTab } from '~/utils/browser/browser.utils';
 
 console.debug('Background script started');
 
 runtime?.onInstalled.addListener(async () => {
+  await installContextMenus();
+
   console.debug('Extension installed');
-  if (!context) return;
-  await Promise.all(Object.values(ContextMenus).map(m => context!.create(m)));
+});
 
-  console.debug('Context menus created');
+runtime?.onMessage.addListener(async message => {
+  if (message.type === MessageType.ContextMenu) {
+    await installContextMenus(message.enabled);
+  }
 });
 
 context?.onClicked.addListener(async info => {
-  console.debug('Context menu event', info);
-
-  if (!info?.selectionText) return;
-  await storage.local.set(RouterStorageKey.LastRoute, {
-    name: Route.Search,
-    query: { search: info.selectionText },
-  } satisfies Partial<RouteLocationNormalized>);
-
-  if (info.menuItemId !== ContextMenuId.OpenInSideTrakt) return;
-
-  if (action?.openPopup) {
-    await action.openPopup();
-  } else if (runtime) {
-    await createTab({
-      url: runtime.getURL('views/options/index.html'),
-    });
+  if (isContextMenuId(info.menuItemId)) {
+    return ContextMenusHooks[info.menuItemId](info);
   }
+  console.error('Unknown context menu event', info);
 });

src/stores/settings/context-menu.store.ts

@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia';
+
+import { computed, reactive, toRefs } from 'vue';
+
+import { ContextMenuConstants, ContextMenuId, type ContextMenuIds } from '~/models/context/context-menu.model';
+import { MessageType } from '~/models/message/message-type.model';
+import { runtime } from '~/utils/browser/browser-runtime.utils';
+import { storage } from '~/utils/browser/browser-storage.utils';
+import { debounce } from '~/utils/debounce.utils';
+
+type ContextMenuState = Record<ContextMenuIds, boolean>;
+
+const defaultState = {
+  [ContextMenuId.OpenInSideTrakt]: false,
+  [ContextMenuId.AddToSearchHistory]: false,
+} as const;
+
+export const useContextMenuStore = defineStore(ContextMenuConstants.Store, () => {
+  const enabled = reactive<ContextMenuState>(defaultState);
+
+  const clearState = () => {
+    Object.assign(enabled, defaultState);
+  };
+
+  const saveState = debounce(async () => {
+    await storage.local.set(ContextMenuConstants.LocalEnabled, enabled);
+    await runtime?.sendMessage({ type: MessageType.ContextMenu, enabled });
+  }, 500);
+
+  const restoreState = async () => {
+    const state = await storage.local.get<ContextMenuState>(ContextMenuConstants.LocalEnabled);
+    if (state) Object.assign(enabled, state);
+    return state;
+  };
+
+  const toggleContextMenu = (id: ContextMenuIds) => {
+    enabled[id] = !enabled[id];
+    saveState().catch(err => console.error('Failed to save context menu state', { id, err }));
+  };
+
+  const initContextMenuStore = async () => {
+    await restoreState();
+  };
+
+  return {
+    clearState,
+    initContextMenuStore,
+    toggleContextMenu,
+    enabledContextMenus: computed(() => Object.entries(enabled) as [ContextMenuIds, boolean][]),
+  };
+});
+
+export const useContextMenuStoreRefs = () => toRefs(useContextMenuStore());

src/utils/browser/browser-context.utils.ts

@@ -2,3 +2,8 @@
  * Browser context alias
  */
 export const context: typeof chrome.contextMenus | undefined = globalThis?.chrome?.contextMenus;
+
+/**
+ * Browser context menu clicked event alias
+ */
+export type ContextMenuOnClickedData = chrome.contextMenus.OnClickData;

src/web/init-services.ts

@@ -8,6 +8,7 @@ import { useMovieStore } from '~/stores/data/movie.store';
 import { useSearchStore } from '~/stores/data/search.store';
 import { useShowStore } from '~/stores/data/show.store';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
+import { useContextMenuStore } from '~/stores/settings/context-menu.store';
 import { useExtensionSettingsStore } from '~/stores/settings/extension.store';
 import { useLinksStore } from '~/stores/settings/links.store';
 import { useLogStore } from '~/stores/settings/log.store';
@@ -48,6 +49,7 @@ export const initServices = async () => {
     useSearchStore().initSearchStore(),
     useShowStore().initShowStore(),
     useMovieStore().initMovieStore(),
+    useContextMenuStore().initContextMenuStore(),
   ]);
 
   setAppReady(true);