feat: zoom buttons

package.json

@@ -138,7 +138,8 @@
     "nock": "13.5.4",
     "postcss": "8.4.39",
     "postcss-loader": "8.1.1",
-    "rimraf": "5.0.8",
+    "resize-observer-polyfill": "1.5.1",
+    "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "tailwindcss": "3.4.4",
     "ts-jest": "29.1.5",

src/__mocks__/electron.js

@@ -49,4 +49,8 @@ module.exports = {
   shell: {
     openExternal: jest.fn(),
   },
+  webFrame: {
+    setZoomLevel: jest.fn(),
+    getZoomLevel: jest.fn(),
+  },
 };

src/components/settings/AppearanceSettings.test.tsx

@@ -4,6 +4,8 @@ import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
 import { AppearanceSettings } from './AppearanceSettings';
 
+global.ResizeObserver = require('resize-observer-polyfill');
+
 describe('routes/components/AppearanceSettings.tsx', () => {
   const updateSetting = jest.fn();
 

src/components/settings/AppearanceSettings.tsx

@@ -5,16 +5,21 @@ import {
   MilestoneIcon,
   TagIcon,
 } from '@primer/octicons-react';
-import { ipcRenderer } from 'electron';
-import { type FC, useContext, useEffect } from 'react';
+import { ipcRenderer, webFrame } from 'electron';
+import { type FC, useContext, useEffect, useState } from 'react';
 import { AppContext } from '../../context/App';
 import { Size, Theme } from '../../types';
 import { setTheme } from '../../utils/theme';
+import { percentageToZoom, zoomToPercentage } from '../../utils/zoom';
+import { Button } from '../buttons/Button';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
 
 export const AppearanceSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
+  const [zoomLevel, setZoomLevel] = useState(
+    zoomToPercentage(webFrame.getZoomLevel()),
+  );
 
   useEffect(() => {
     ipcRenderer.on('gitify:update-theme', (_, updatedTheme: Theme) => {
@@ -24,6 +29,10 @@ export const AppearanceSettings: FC = () => {
     });
   }, [settings.theme]);
 
+  window.addEventListener('resize', () => {
+    setZoomLevel(zoomToPercentage(webFrame.getZoomLevel()));
+  });
+
   return (
     <fieldset>
       <legend id="appearance" className="mb-1 mt-2 font-semibold">
@@ -43,6 +52,48 @@ export const AppearanceSettings: FC = () => {
         }}
         className="mb-0"
       />
+      <div className="flex">
+        <label
+          htmlFor="Zoom"
+          className="mr-3 content-center font-medium text-sm text-gray-700 dark:text-gray-200"
+        >
+          Zoom:
+        </label>
+        <Button
+          label="Zoom Out"
+          onClick={() =>
+            zoomLevel > 0 &&
+            webFrame.setZoomLevel(percentageToZoom(zoomLevel - 10))
+          }
+          className="rounded-r-none"
+          size="sm"
+        >
+          -
+        </Button>
+        <span className="flex w-16 items-center justify-center rounded-none border border-gray-300 bg-transparent text-sm text-gray-700 dark:text-gray-200">
+          {zoomLevel.toFixed(0)}%
+        </span>
+        <Button
+          label="Zoom In"
+          onClick={() =>
+            zoomLevel < 120 &&
+            webFrame.setZoomLevel(percentageToZoom(zoomLevel + 10))
+          }
+          className="rounded-none"
+          size="sm"
+        >
+          +
+        </Button>
+        <Button
+          label="Reset"
+          onClick={() => webFrame.setZoomLevel(0)}
+          variant="destructive"
+          className="rounded-l-none"
+          size="sm"
+        >
+          X
+        </Button>
+      </div>
       <Checkbox
         name="detailedNotifications"
         label="Detailed notifications"

src/components/settings/SettingsFooter.test.tsx

@@ -11,6 +11,8 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockNavigate,
 }));
 
+global.ResizeObserver = require('resize-observer-polyfill');
+
 describe('routes/components/SettingsFooter.tsx', () => {
   afterEach(() => {
     jest.clearAllMocks();

src/routes/Settings.test.tsx

@@ -5,6 +5,8 @@ import { mockPlatform } from '../__mocks__/utils';
 import { AppContext } from '../context/App';
 import { SettingsRoute } from './Settings';
 
+global.ResizeObserver = require('resize-observer-polyfill');
+
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),

src/utils/zoom.test.ts

@@ -0,0 +1,17 @@
+import { percentageToZoom, zoomToPercentage } from './zoom';
+
+describe('utils/zoom.ts', () => {
+  it('should convert percentage to zoom level', () => {
+    expect(percentageToZoom(100)).toBe(0);
+    expect(percentageToZoom(50)).toBe(-1);
+    expect(percentageToZoom(0)).toBe(-2);
+    expect(percentageToZoom(150)).toBe(1);
+  });
+
+  it('should convert zoom level to percentage', () => {
+    expect(zoomToPercentage(0)).toBe(100);
+    expect(zoomToPercentage(-1)).toBe(50);
+    expect(zoomToPercentage(-2)).toBe(0);
+    expect(zoomToPercentage(1)).toBe(150);
+  });
+});

src/utils/zoom.ts

@@ -0,0 +1,15 @@
+const RECOMMENDED = 100;
+const MULTIPLIER = 2;
+
+/**
+ * Percentage to zoom level. 100% is the recommended zoom level (0).
+ * @param percentage 0-150
+ * @returns zoomLevel -2 to 0.5
+ */
+export const percentageToZoom = (percentage: number): number => {
+  return ((percentage - RECOMMENDED) * MULTIPLIER) / 100;
+};
+
+export const zoomToPercentage = (zoom: number): number => {
+  return (zoom / MULTIPLIER) * 100 + RECOMMENDED;
+};