feat(side-panel): adds side-panel support

Author: dvcol

src/components/views/settings/SettingsComponent.vue

@@ -55,6 +55,9 @@ const SettingsActions = lazyComponent(
 const SettingsTheme = lazyComponent(
   () => import('~/components/views/settings/SettingsTheme.vue'),
 );
+const SettingsIconAction = lazyComponent(
+  () => import('~/components/views/settings/SettingsIconAction.vue'),
+);
 
 const i18n = useI18n('settings');
 
@@ -83,6 +86,7 @@ const sections = computed<Section[]>(() =>
     { title: 'menu__menus', reference: ref(), component: SettingsMenus },
     { title: 'menu__watching', reference: ref(), component: SettingsWatching },
     { title: 'menu__activity', reference: ref(), component: SettingsActivity },
+    { title: 'menu__icon', reference: ref(), component: SettingsIconAction },
     { title: 'menu__badge', reference: ref(), component: SettingsBadge },
     { title: 'menu__cache', reference: ref(), component: SettingsCache },
     { title: 'menu__export', reference: ref(), component: SettingsExport },

src/components/views/settings/SettingsIconAction.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { chromeRuntimeId } from '@dvcol/web-extension-utils/chrome/runtime';
+import { NSwitch } from 'naive-ui';
+
+import { ref } from 'vue';
+
+import SettingsFormItem from '~/components/views/settings/SettingsFormItem.vue';
+import { IconAction } from '~/models/icon-action';
+import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
+import { useI18n } from '~/utils/i18n.utils';
+
+const i18n = useI18n('settings', 'icon');
+
+const { iconAction } = useExtensionSettingsStoreRefs();
+
+const toggleIconAction = (isPanel = iconAction.value === IconAction.Panel) => {
+  iconAction.value = isPanel ? IconAction.Popup : IconAction.Panel;
+};
+
+const container = ref();
+</script>
+
+<template>
+  <div ref="container" class="icon-action-container">
+    <!--  Enable  -->
+    <SettingsFormItem :label="i18n('label_toggle')">
+      <NSwitch
+        :value="iconAction === IconAction.Panel"
+        class="form-switch"
+        :disabled="!chromeRuntimeId"
+        @update:value="() => toggleIconAction()"
+      >
+        <template #checked>{{ i18n('label_toggle_panel') }}</template>
+        <template #unchecked>{{ i18n('label_toggle_popup') }}</template>
+      </NSwitch>
+    </SettingsFormItem>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-action-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.form-select {
+  min-width: 8rem;
+}
+
+.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-icon.json

@@ -0,0 +1,14 @@
+{
+  "settings__icon__label_toggle": {
+    "message": "Open Side Trakt in a side panel or a popup",
+    "description": "Label for toggling between side panel and popup."
+  },
+  "settings__icon__label_toggle_panel": {
+    "message": "Panel",
+    "description": "Label for the side panel option."
+  },
+  "settings__icon__label_toggle_popup": {
+    "message": "Popup",
+    "description": "Label for the popup option."
+  }
+}

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

@@ -54,5 +54,9 @@
   "settings__menu__badge": {
     "message": "Badge",
     "description": "Badge ui menu item"
+  },
+  "settings__menu__icon": {
+    "message": "Icon",
+    "description": "Icon Action menu item"
   }
 }

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

@@ -1,10 +1,14 @@
 {
   "settings__menus__label_menu__open_in_side_trakt": {
-    "message": "Open selection in Side Trakt",
+    "message": "Open selection in Side Trakt window",
     "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"
+  },
+  "settings__menus__label_menu__open_in_side_trakt_panel": {
+    "message": "Open selection in Side Trakt side panel",
+    "description": "Label to toggle the 'Open selection in Side Trakt side panel' menu item"
   }
 }

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

@@ -1,9 +1,10 @@
 import { openPopup } from '@dvcol/web-extension-utils/chrome/action';
 import { context } from '@dvcol/web-extension-utils/chrome/context';
 import { runtime } from '@dvcol/web-extension-utils/chrome/runtime';
+import { openPanel } from '@dvcol/web-extension-utils/chrome/side-panel';
 import { createTab } from '@dvcol/web-extension-utils/chrome/tabs';
 
-import type { ContextMenuOnClickedData } from '@dvcol/web-extension-utils/chrome/models';
+import type { ContextMenuOnClickedData, Tab } from '@dvcol/web-extension-utils/chrome/models';
 import type { RouteLocationNormalized } from 'vue-router';
 
 import { ContextMenuConstants, ContextMenuId, type ContextMenuIds, ContextMenus } from '~/models/context/context-menu.model';
@@ -21,12 +22,20 @@ const setLastRoute = (data: ContextMenuOnClickedData) => {
 const openPopupApp = async () => {
   if (openPopup) return openPopup();
   if (!runtime) return;
+  // Fallback to open options page
   await createTab({
     url: runtime.getURL('views/options/index.html'),
   });
 };
 
-export const ContextMenusHooks: Record<ContextMenuIds, (data: ContextMenuOnClickedData) => void | Promise<void>> = {
+export const ContextMenusHooks: Record<ContextMenuIds, (data: ContextMenuOnClickedData, tab?: Tab) => void | Promise<void>> = {
+  [ContextMenuId.OpenInSideTraktPanel]: async (data, tab) => {
+    if (tab?.windowId && openPanel) await openPanel({ windowId: tab.windowId });
+    await setLastRoute(data);
+    if (tab?.windowId && openPanel) return;
+    // Fallback to open popup/options page
+    await openPopupApp();
+  },
   [ContextMenuId.OpenInSideTrakt]: async data => {
     await setLastRoute(data);
     await openPopupApp();

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

@@ -1,6 +1,7 @@
 export const ContextMenuId = {
   OpenInSideTrakt: 'open_in_side_trakt',
   AddToSearchHistory: 'add_to_search_history',
+  OpenInSideTraktPanel: 'open_in_side_trakt_panel',
 } as const;
 
 export type ContextMenuIds = (typeof ContextMenuId)[keyof typeof ContextMenuId];
@@ -17,7 +18,12 @@ export type ContextMenu = {
 export const ContextMenus: Record<ContextMenuIds, ContextMenu> = {
   [ContextMenuId.OpenInSideTrakt]: {
     id: ContextMenuId.OpenInSideTrakt,
-    title: 'Open in side trakt',
+    title: 'Open Side Trakt window',
+    contexts: ['selection'],
+  },
+  [ContextMenuId.OpenInSideTraktPanel]: {
+    id: ContextMenuId.OpenInSideTraktPanel,
+    title: 'Open Side Trakt panel',
     contexts: ['selection'],
   },
   [ContextMenuId.AddToSearchHistory]: {

src/models/icon-action.ts

@@ -0,0 +1,6 @@
+export const IconAction = {
+  Popup: 'popup' as const,
+  Panel: 'panel' as const,
+} as const;
+
+export type IconActions = (typeof IconAction)[keyof typeof IconAction];

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

@@ -1,5 +1,6 @@
 import type { VersionUpdateDetails } from '@dvcol/web-extension-utils/chrome/models';
 import type { ContextMenuIds } from '~/models/context/context-menu.model';
+import type { IconActions } from '~/models/icon-action';
 import type { BadgeColorDetails, TabIconDetails } from '~/utils/browser/browser-message.utils';
 
 export const MessageType = {
@@ -8,6 +9,7 @@ export const MessageType = {
   AppReady: 'app-ready',
   BadgeUpdate: 'badge-update',
   IconUpdate: 'icon-update',
+  IconOptions: 'icon-options',
 } as const;
 
 export type MessageTypes = (typeof MessageType)[keyof typeof MessageType];
@@ -32,4 +34,6 @@ export type MessagePayload<T extends MessageTypes = MessageTypes> = T extends ty
         ? BadgeUpdatePayload
         : T extends typeof MessageType.IconUpdate
           ? { icon?: TabIconDetails; color?: BadgeColorDetails }
-          : never;
+          : T extends typeof MessageType.IconOptions
+            ? { open: IconActions }
+            : never;

src/scripts/background/index.ts

@@ -1,9 +1,11 @@
 import { setBadgeBackgroundColor, setBadgeText, setBadgeTextColor, setIcon, 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';
+import { getPanelBehavior, setPanelBehavior } from '@dvcol/web-extension-utils/chrome/side-panel';
 
 import { ContextMenusHooks, installContextMenus } from '~/models/context/context-menu-hooks.model';
 import { isContextMenuId } from '~/models/context/context-menu.model';
+import { IconAction } from '~/models/icon-action';
 import { MessageType } from '~/models/message/message-type.model';
 import { onMessage } from '~/utils/browser/browser-message.utils';
 import { storage } from '~/utils/browser/browser-storage.utils';
@@ -40,9 +42,9 @@ try {
 }
 
 try {
-  onContextMenuClicked(async info => {
+  onContextMenuClicked(async (info, tab) => {
     if (isContextMenuId(info.menuItemId)) {
-      return ContextMenusHooks[info.menuItemId](info);
+      return ContextMenusHooks[info.menuItemId](info, tab);
     }
     console.error('Unknown context menu event', info);
   });
@@ -73,3 +75,17 @@ try {
 } catch (error) {
   console.error('Failed to handle badge update message', error);
 }
+
+try {
+  onMessage(MessageType.IconOptions, async message => {
+    if (!message.payload) return;
+    if (!setPanelBehavior || !getPanelBehavior) return;
+    const options = await getPanelBehavior();
+    const openPanel = message.payload.open === IconAction.Panel;
+    if (options.openPanelOnActionClick === openPanel) return;
+    setPanelBehavior({ openPanelOnActionClick: openPanel });
+    console.debug('App ready', { open: message.payload.open, options, openPanel });
+  });
+} catch (error) {
+  console.error('Failed to handle side panel options message', error);
+}

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

@@ -14,6 +14,7 @@ type ContextMenuState = Record<ContextMenuIds, boolean>;
 const defaultState = {
   [ContextMenuId.OpenInSideTrakt]: false,
   [ContextMenuId.AddToSearchHistory]: false,
+  [ContextMenuId.OpenInSideTraktPanel]: false,
 } as const;
 
 export const useContextMenuStore = defineStore(ContextMenuConstants.Store, () => {

src/stores/settings/extension.store.ts

@@ -5,10 +5,13 @@ import { defineStore, storeToRefs } from 'pinia';
 
 import { computed, reactive, ref, toRaw } from 'vue';
 
+import type { IconActions } from '~/models/icon-action';
+
 import type { PosterItem } from '~/models/poster.model';
 
 import NewExtensionIcon from '~/assets/brand/favicon-128x128.png';
 import OldExtensionIcon from '~/assets/favicon/favicon-128x128.png';
+import { IconAction } from '~/models/icon-action';
 import { DefaultLists, type ListEntity } from '~/models/list.model';
 import { MessageType } from '~/models/message/message-type.model';
 import { NavbarPosition, type NavbarPositions } from '~/models/navbar-position.model';
@@ -118,6 +121,8 @@ export const DefaultQuickActionLists: QuickActionListDictionary = {
   [Route.Search]: DefaultLists.Watchlist,
 };
 
+const sendIconActionUpdate = debounce((action: IconActions) => sendMessage({ type: MessageType.IconOptions, payload: { open: action } }), 500);
+
 type ThemeColors = {
   main?: string;
   dark?: string;
@@ -144,6 +149,7 @@ type ExtensionSettings = {
   actionDate: ActionDateDictionary;
   actionLists: QuickActionListDictionary;
   theme: ThemeColors;
+  iconAction: IconActions;
 };
 
 const ExtensionSettingsConstants = {
@@ -175,6 +181,8 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
   const brand = ref<Brands>(Brand.Old);
   const theme = reactive<ThemeColors>({ background: 'transparent' });
 
+  const iconAction = ref<IconActions>(IconAction.Popup);
+
   const clearState = () => {
     Object.assign(cacheRetention, DefaultCacheRetention);
     Object.assign(routeDictionary, DefaultRoutes);
@@ -207,6 +215,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         actionDate: toRaw(actionDate),
         actionLists: toRaw(actionLists),
         theme: toRaw(theme),
+        iconAction: iconAction.value,
       }),
     500,
   );
@@ -251,6 +260,7 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
     if (restored?.actionLists !== undefined) Object.assign(actionLists, restored.actionLists);
 
     if (restored?.theme !== undefined) Object.assign(theme, restored.theme);
+    if (restored?.iconAction !== undefined) iconAction.value = restored.iconAction;
 
     if (!chromeRuntimeId) routeDictionary[Route.Progress] = false;
   };
@@ -449,6 +459,14 @@ export const useExtensionSettingsStore = defineStore(ExtensionSettingsConstants.
         saveState().catch(err => Logger.error('Failed to save icon only extension settings', { value, err }));
       },
     }),
+    iconAction: computed<IconActions>({
+      get: () => iconAction.value,
+      set: (value: IconActions) => {
+        iconAction.value = value;
+        sendIconActionUpdate(value).catch(err => Logger.error('Failed to toggle icon action', { value, err }));
+        saveState().catch(err => Logger.error('Failed to save icon action extension settings', { value, err }));
+      },
+    }),
     getImageSettings,
     setImageType,
     setImageFormat,