Fix accelerators (#1752)

* fix: accelerators with numbers

* fix: control zoom in

* fix logic on macOS

* fix for linux

* chore: prepare-code

* chore: adjust comments

7 files changed, 93 insertions, 22 deletions

diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index 0e999506a..94c0b7e7f 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -364,10 +364,10 @@ class TabItem extends Component<IProps, IState> {
         role="presentation"
         onContextMenu={() => menu.popup()}
         data-tooltip-id="tooltip-sidebar-button"
-        data-tooltip-content={`${service.name} ${acceleratorString(
-          shortcutIndex,
-          cmdOrCtrlShortcutKey(false),
-        )}`}
+        data-tooltip-content={`${service.name} ${acceleratorString({
+          index: shortcutIndex,
+          keyCombo: cmdOrCtrlShortcutKey(false),
+        })}`}
       >
         <img src={service.icon} className="tab-item__icon" alt="" />
         {showServiceNameSetting && (
diff --git a/src/electron/ipc-api/dnd.ts b/src/electron/ipc-api/dnd.ts
index 30ace7c84..240e4a1cf 100644
--- a/src/electron/ipc-api/dnd.ts
+++ b/src/electron/ipc-api/dnd.ts
@@ -8,7 +8,7 @@ export default async () => {
     if (!isMac) {
       return false;
     }
-
+    // @ts-expect-error
     const { getDoNotDisturb } = await import('macos-notification-state');
 
     if (!getDoNotDisturb) {
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.tsx b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
index 01a18ffb0..23851edf6 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.tsx
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.tsx
@@ -125,10 +125,10 @@ class WorkspaceDrawerItem extends Component<IProps> {
         }}
         onKeyDown={noop}
         data-tooltip-id="tooltip-workspaces-drawer"
-        data-tooltip-content={acceleratorString(
-          shortcutIndex,
-          `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`,
-        )}
+        data-tooltip-content={acceleratorString({
+          index: shortcutIndex,
+          keyCombo: `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`,
+        })}
       >
         <span
           className={classnames([
diff --git a/src/jsUtils.ts b/src/jsUtils.ts
index 0befb8d56..145875cfa 100644
--- a/src/jsUtils.ts
+++ b/src/jsUtils.ts
@@ -28,12 +28,21 @@ export const safeParseInt = (text?: string | number | null) => {
   return Math.max(adjustedNumber, 0);
 };
 
-export const acceleratorString = (
-  index: number,
-  keyCombo: string,
-  prefix: string = '(',
-  suffix: string = ')',
-) => (index <= 10 ? `${prefix}${keyCombo}+${index % 10}${suffix}` : '');
+interface IAcceleratorString {
+  keyCombo: string;
+  index: number;
+  prefix?: string;
+  suffix?: string;
+  maxIndex?: number;
+}
+export const acceleratorString = ({
+  index,
+  keyCombo,
+  prefix = '(',
+  suffix = ')',
+  maxIndex = 9,
+}: IAcceleratorString) =>
+  index <= maxIndex ? `${prefix}${keyCombo}+${index % 10}${suffix}` : '';
 
 export const removeNewLines = (input: string): string =>
   input.replaceAll(/\r?\n|\r/g, '');
diff --git a/src/lib/Menu.ts b/src/lib/Menu.ts
index bb8eead3a..8fd8e0a73 100644
--- a/src/lib/Menu.ts
+++ b/src/lib/Menu.ts
@@ -496,7 +496,15 @@ function titleBarTemplateFactory(
         },
         {
           label: intl.formatMessage(menuItems.zoomIn),
-          accelerator: `${cmdOrCtrlShortcutKey()}+plus`,
+          // TODO: Modify this logic once https://github.com/electron/electron/issues/40674 is fixed
+          // This is a workaround for the issue where the zoom in shortcut is not working
+          // This makes sure the accelerator is not registered
+          accelerator: isWindows
+            ? `${cmdOrCtrlShortcutKey()}++`
+            : `${cmdOrCtrlShortcutKey()}+Plus`,
+          registerAccelerator: !!isMac,
+          acceleratorWorksWhenHidden: !!isMac,
+          // ---------------------------
           click() {
             const activeService = getActiveService();
             if (!activeService) {
@@ -1134,7 +1142,12 @@ class FranzMenu implements StoresProps {
     for (const [i, service] of services.allDisplayed.entries()) {
       menu.push({
         label: this._getServiceName(service),
-        accelerator: acceleratorString(i + 1, cmdOrCtrlShortcutKey(), '', ''),
+        accelerator: acceleratorString({
+          index: i + 1,
+          keyCombo: cmdOrCtrlShortcutKey(),
+          prefix: '',
+          suffix: '',
+        }),
         type: 'radio',
         checked: service.isActive,
         click: () => {
diff --git a/src/models/Service.ts b/src/models/Service.ts
index a61df5570..ae04b8b58 100644
--- a/src/models/Service.ts
+++ b/src/models/Service.ts
@@ -7,6 +7,7 @@ import type ElectronWebView from 'react-electron-web-view';
 import { v4 as uuidV4 } from 'uuid';
 import { needsToken } from '../api/apiBase';
 import { DEFAULT_SERVICE_ORDER, DEFAULT_SERVICE_SETTINGS } from '../config';
+import { isMac } from '../environment';
 import { todosStore } from '../features/todos';
 import { getFaviconUrl } from '../helpers/favicon-helpers';
 import { isValidExternalURL, normalizedUrl } from '../helpers/url-helpers';
@@ -536,6 +537,18 @@ export default class Service {
     });
 
     if (webviewWebContents) {
+      // TODO: Modify this logic once https://github.com/electron/electron/issues/40674 is fixed
+      // This is a workaround for the issue where the zoom in shortcut is not working
+      if (!isMac) {
+        webviewWebContents.on('before-input-event', (event, input) => {
+          if (input.control && input.key === '+' && input.type === 'keyDown') {
+            event.preventDefault();
+            const currentZoom = this.webview?.getZoomLevel();
+            this.webview?.setZoomLevel(currentZoom + 0.5);
+          }
+        });
+      }
+
       webviewWebContents.session.on('will-download', (event, item) => {
         event.preventDefault();
 
diff --git a/test/jsUtils.test.ts b/test/jsUtils.test.ts
index 508f5dd9f..b40b21b2a 100644
--- a/test/jsUtils.test.ts
+++ b/test/jsUtils.test.ts
@@ -180,23 +180,59 @@ describe('jsUtils', () => {
 
   describe('acceleratorString', () => {
     it('handles without prefix and suffix', () => {
-      expect(jsUtils.acceleratorString(5, 'abc')).toEqual('(abc+5)');
+      expect(
+        jsUtils.acceleratorString({
+          index: 5,
+          keyCombo: 'abc',
+        }),
+      ).toEqual('(abc+5)');
     });
 
     it('handles index = 0', () => {
-      expect(jsUtils.acceleratorString(0, 'abc')).toEqual('(abc+0)');
+      expect(
+        jsUtils.acceleratorString({
+          index: 0,
+          keyCombo: 'abc',
+        }),
+      ).toEqual('(abc+0)');
     });
 
     it('handles index = 1', () => {
-      expect(jsUtils.acceleratorString(1, 'abc')).toEqual('(abc+1)');
+      expect(
+        jsUtils.acceleratorString({
+          index: 1,
+          keyCombo: 'abc',
+        }),
+      ).toEqual('(abc+1)');
     });
 
     it('handles index = 10', () => {
-      expect(jsUtils.acceleratorString(10, 'abc')).toEqual('(abc+0)');
+      expect(
+        jsUtils.acceleratorString({
+          index: 10,
+          keyCombo: 'abc',
+          maxIndex: 10,
+        }),
+      ).toEqual('(abc+0)');
     });
 
     it('handles index = 11', () => {
-      expect(jsUtils.acceleratorString(11, 'abc')).toEqual('');
+      expect(
+        jsUtils.acceleratorString({
+          index: 11,
+          keyCombo: 'abc',
+        }),
+      ).toEqual('');
+    });
+
+    it('handles index = 9, maxIndex = 8', () => {
+      expect(
+        jsUtils.acceleratorString({
+          index: 9,
+          maxIndex: 8,
+          keyCombo: 'abc',
+        }),
+      ).toEqual('');
     });
   });