Add zooming functionality (#140)

src/renderer/features/settings/components/general/application-settings.tsx

@@ -1,10 +1,13 @@
-import { Select } from '/@/renderer/components';
+import isElectron from 'is-electron';
+import { NumberInput, Select } from '/@/renderer/components';
 import {
   SettingsSection,
   SettingOption,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
 const FONT_OPTIONS = [
   { label: 'Archivo', value: 'Archivo' },
   { label: 'Fredoka', value: 'Fredoka' },
@@ -53,6 +56,32 @@ export const ApplicationSettings = () => {
       isHidden: false,
       title: 'Font (Content)',
     },
+    {
+      control: (
+        <NumberInput
+          disabled={!isElectron()}
+          max={300}
+          min={50}
+          value={settings.zoomFactor}
+          onBlur={(e) => {
+            if (!e) return;
+            const newVal = e.currentTarget.value
+              ? Math.min(Math.max(Number(e.currentTarget.value), 50), 300)
+              : settings.zoomFactor;
+            setSettings({
+              general: {
+                ...settings,
+                zoomFactor: newVal,
+              },
+            });
+            localSettings.setZoomFactor(newVal);
+          }}
+        />
+      ),
+      description: 'Sets the application zoom factor in percent',
+      isHidden: false,
+      title: 'Zoom factor',
+    },
   ];
 
   return <SettingsSection options={options} />;

src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx

@@ -28,6 +28,8 @@ const BINDINGS_MAP: Record<BindingActions, string> = {
   volumeDown: 'Volume down',
   volumeMute: 'Volume mute',
   volumeUp: 'Volume up',
+  zoomIn: 'Zoom in',
+  zoomOut: 'Zoom out',
 };
 
 const HotkeysContainer = styled.div`
@@ -65,6 +67,8 @@ export const HotkeyManagerSettings = () => {
           else if (e.key === '/') keys.push('numpaddivide');
           else if (e.key === '.') keys.push('numpaddecimal');
           else keys.push(`numpad${e.key}`.toLowerCase());
+        } else if (e.key === '+') {
+          keys.push('equal');
         } else {
           keys.push(e.key?.toLowerCase());
         }