Allow customising certain keyboard shortcuts

This allows customising next/previous service shortcuts, but opens the
door to using the same code and UI for customizing further shortcuts.

These particular shortcuts were requested to be customizable in the
github issue #53

src/components/settings/settings/EditSettingsForm.tsx

@@ -201,6 +201,10 @@ const messages = defineMessages({
     id: 'settings.app.subheadlineDownloads',
     defaultMessage: 'Downloads',
   },
+  subheadlineShortcuts: {
+    id: 'settings.app.subheadlineShortcuts',
+    defaultMessage: 'Shortcuts',
+  },
   cacheInfo: {
     id: 'settings.app.cacheInfo',
     defaultMessage: 'Ferdium cache is currently using {size} of disk space.',
@@ -1214,6 +1218,24 @@ class EditSettingsForm extends Component<IProps, IState> {
                     })}
                   </p>
                 </div>
+
+                <Hr />
+
+                <div className="settings__settings-group">
+                  <H3>{intl.formatMessage(messages.subheadlineShortcuts)}</H3>
+
+                  <Input
+                    placeholder="Activate next service"
+                    onChange={e => this.submit(e)}
+                    {...form.$('shortcutActivateNextService').bind()}
+                  />
+
+                  <Input
+                    placeholder="Activate previous service"
+                    onChange={e => this.submit(e)}
+                    {...form.$('shortcutActivatePreviousService').bind()}
+                  />
+                </div>
               </div>
             )}
 

src/config.ts

@@ -2,6 +2,8 @@
 
 import ms from 'ms';
 
+import { ctrlKey, shiftKey } from './environment';
+
 export const DEFAULT_ACCENT_COLOR = '#7367F0';
 
 export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
@@ -326,7 +328,7 @@ export const FERDIUM_TRANSLATION = 'https://crowdin.com/project/ferdium-app';
 export const FERDIUM_DEV_DOCS =
   'https://github.com/ferdium/ferdium-recipes/blob/main/docs/integration.md';
 
-export const FILE_SYSTEM_SETTINGS_TYPES = ['app', 'proxy'];
+export const FILE_SYSTEM_SETTINGS_TYPES = ['app', 'proxy', 'shortcuts'];
 
 export const LOCAL_SERVER = 'You are using Ferdium without a server';
 export const SERVER_NOT_LOADED = 'Ferdium::SERVER_NOT_LOADED';
@@ -470,3 +472,8 @@ export const DEFAULT_SERVICE_SETTINGS = {
   darkReaderContrast: 90,
   darkReaderSepia: 10,
 };
+
+export const DEFAULT_SHORTCUTS = {
+  activateNextService: `${ctrlKey}+tab`,
+  activatePreviousService: `${ctrlKey}+${shiftKey()}+tab`,
+};

src/containers/settings/EditSettingsScreen.tsx

@@ -11,6 +11,7 @@ import type { StoresProps } from '../../@types/ferdium-components.types';
 import type { FormFields } from '../../@types/mobx-form.types';
 import {
   DEFAULT_APP_SETTINGS,
+  DEFAULT_SHORTCUTS,
   GOOGLE_TRANSLATOR_LANGUAGES,
   HIBERNATION_STRATEGIES,
   ICON_SIZES,
@@ -42,6 +43,7 @@ import ErrorBoundary from '../../components/util/ErrorBoundary';
 import { importExportURL } from '../../api/apiBase';
 import globalMessages from '../../i18n/globalMessages';
 import { ifUndefined } from '../../jsUtils';
+import { menuItems } from '../../lib/Menu';
 
 const debug = require('../../preload-safe-debug')('Ferdium:EditSettingsScreen');
 
@@ -504,6 +506,11 @@ class EditSettingsScreen extends Component<
       sandboxServices: Boolean(settingsData.sandboxServices),
     };
 
+    const newShortcuts = {
+      activateNextService: settingsData.shortcutActivateNextService,
+      activatePreviousService: settingsData.shortcutActivatePreviousService,
+    };
+
     const requiredRestartKeys = [
       'webRTCIPHandlingPolicy',
       'sentry',
@@ -544,6 +551,12 @@ class EditSettingsScreen extends Component<
       data: newSettings,
     });
 
+    settings.update({
+      type: 'shortcuts',
+      // TODO: The conversions might not be necessary once we convert to typescript
+      data: newShortcuts,
+    });
+
     user.update({
       userData: {
         automaticUpdates: Boolean(settingsData.automaticUpdates),
@@ -1311,6 +1324,24 @@ class EditSettingsScreen extends Component<
           default: DEFAULT_APP_SETTINGS.sandboxServices,
           type: 'checkbox',
         },
+        shortcutActivateNextService: {
+          label: intl.formatMessage(menuItems.activateNextService),
+          value: ifUndefined<string>(
+            settings.all.shortcuts.activateNextService,
+            DEFAULT_SHORTCUTS.activateNextService,
+          ),
+          default: DEFAULT_SHORTCUTS.activateNextService,
+          placeholder: DEFAULT_SHORTCUTS.activateNextService,
+        },
+        shortcutActivatePreviousService: {
+          label: intl.formatMessage(menuItems.activatePreviousService),
+          value: ifUndefined<string>(
+            settings.all.shortcuts.activatePreviousService,
+            DEFAULT_SHORTCUTS.activatePreviousService,
+          ),
+          default: DEFAULT_SHORTCUTS.activatePreviousService,
+          placeholder: DEFAULT_SHORTCUTS.activatePreviousService,
+        },
       },
     };
 

src/environment.ts

@@ -19,7 +19,7 @@ export const is64Bit: RegExpMatchArray | null = osArch.match(/64/);
 
 // for accelerator, show the shortform that electron/OS understands
 // for tooltip, show symbol
-const ctrlKey: string = isMac ? '⌘' : 'Ctrl';
+export const ctrlKey: string = isMac ? '⌘' : 'Ctrl';
 const cmdKey: string = isMac ? 'Cmd' : 'Ctrl';
 
 export const altKey = (isAccelerator = true) =>

src/i18n/locales/en-US.json

@@ -321,6 +321,7 @@
   "settings.app.subheadlineCache": "Cache",
   "settings.app.subheadlineDownloads": "Downloads",
   "settings.app.subheadlineFerdiumProfile": "Ferdium Profile",
+  "settings.app.subheadlineShortcuts": "Shortcuts",
   "settings.app.subheadlineUserAgent": "User Agent",
   "settings.app.todoServerInfo": "This server will be used for the \"Ferdium Todo\" feature.",
   "settings.app.translationHelp": "Help us to translate Ferdium into your language.",

src/index.ts

@@ -22,7 +22,11 @@ import enforceMacOSAppLocation from './enforce-macos-app-location';
 
 initializeRemote();
 
-import { DEFAULT_APP_SETTINGS, DEFAULT_WINDOW_OPTIONS } from './config';
+import {
+  DEFAULT_APP_SETTINGS,
+  DEFAULT_SHORTCUTS,
+  DEFAULT_WINDOW_OPTIONS,
+} from './config';
 
 import { altKey, isLinux, isMac, isWindows } from './environment';
 import {
@@ -95,6 +99,7 @@ if (isWindows) {
 // Initialize Settings
 const settings = new Settings('app', DEFAULT_APP_SETTINGS);
 const proxySettings = new Settings('proxy');
+const shortcutSettings = new Settings('shortcuts', DEFAULT_SHORTCUTS);
 
 const retrieveSettingValue = (key: string, defaultValue: boolean | string) =>
   ifUndefined<boolean | string>(settings.get(key), defaultValue);
@@ -283,6 +288,7 @@ const createWindow = () => {
     settings: {
       app: settings,
       proxy: proxySettings,
+      shortcuts: shortcutSettings,
     },
     trayIcon,
   });

src/lib/Menu.ts

@@ -51,7 +51,7 @@ import { acceleratorString } from '../jsUtils';
 import type Service from '../models/Service';
 import type { RealStores } from '../stores';
 
-const menuItems = defineMessages({
+export const menuItems = defineMessages({
   edit: {
     id: 'menu.edit',
     defaultMessage: 'Edit',
@@ -1102,7 +1102,7 @@ class FranzMenu implements StoresProps {
       },
       {
         label: intl.formatMessage(menuItems.activateNextService),
-        accelerator: `${cmdOrCtrlShortcutKey()}+tab`,
+        accelerator: this.stores.settings.shortcuts.activateNextService,
         click: () => this.actions.service.setActiveNext(),
         visible: !cmdAltShortcutsVisibile,
       },
@@ -1114,7 +1114,7 @@ class FranzMenu implements StoresProps {
       },
       {
         label: intl.formatMessage(menuItems.activatePreviousService),
-        accelerator: `${cmdOrCtrlShortcutKey()}+${shiftKey()}+tab`,
+        accelerator: this.stores.settings.shortcuts.activatePreviousService,
         click: () => this.actions.service.setActivePrev(),
         visible: !cmdAltShortcutsVisibile,
       },

src/stores/SettingsStore.ts

@@ -7,6 +7,7 @@ import type { Actions } from '../actions/lib/actions';
 import type { ApiInterface } from '../api';
 import {
   DEFAULT_APP_SETTINGS,
+  DEFAULT_SHORTCUTS,
   FILE_SYSTEM_SETTINGS_TYPES,
   LOCAL_SERVER,
 } from '../config';
@@ -23,6 +24,7 @@ export default class SettingsStore extends TypedStore {
   @observable _fileSystemSettingsCache = {
     app: DEFAULT_APP_SETTINGS,
     proxy: {},
+    shortcuts: DEFAULT_SHORTCUTS,
   };
 
   constructor(stores: Stores, api: ApiInterface, actions: Actions) {
@@ -126,6 +128,10 @@ export default class SettingsStore extends TypedStore {
     );
   }
 
+  @computed get shortcuts() {
+    return this._fileSystemSettingsCache.shortcuts || DEFAULT_SHORTCUTS;
+  }
+
   @computed get stats() {
     return (
       localStorage.getItem('stats') || {
@@ -145,6 +151,7 @@ export default class SettingsStore extends TypedStore {
       service: this.service,
       stats: this.stats,
       migration: this.migration,
+      shortcuts: this.shortcuts,
     };
   }