refactor: percentage branded type with controls

setchy · setchy · commit 7afaeff59aa8 · 2025-11-09T12:38:48.000-05:00
Signed-off-by: Adam Setch &lt;adam.setch@outlook.com&gt;
diff --git a/src/renderer/__mocks__/state-mocks.ts b/src/renderer/__mocks__/state-mocks.ts
@@ -12,6 +12,7 @@ import {
   type Link,
   type NotificationSettingsState,
   OpenPreference,
+  type Percentage,
   type SettingsState,
   type SystemSettingsState,
   Theme,
@@ -81,7 +82,7 @@ export const mockToken = 'token-123-456' as Token;
 const mockAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
   increaseContrast: false,
-  zoomPercentage: 100,
+  zoomPercentage: 100 as Percentage,
   showAccountHeader: false,
   wrapNotificationTitle: false,
 };
@@ -111,7 +112,7 @@ const mockSystemSettings: SystemSettingsState = {
   keyboardShortcut: true,
   showNotifications: true,
   playSound: true,
-  notificationVolume: 20,
+  notificationVolume: 20 as Percentage,
   openAtStartup: false,
 };
 
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -18,7 +18,13 @@ import {
 import { AppContext } from '../../context/App';
 import { Theme } from '../../types';
 import { hasMultipleAccounts } from '../../utils/auth/utils';
-import { zoomLevelToPercentage, zoomPercentageToLevel } from '../../utils/zoom';
+import {
+  canDecreaseZoom,
+  canIncreaseZoom,
+  decreaseZoom,
+  increaseZoom,
+  zoomLevelToPercentage,
+} from '../../utils/zoom';
 import { Checkbox } from '../fields/Checkbox';
 import { FieldLabel } from '../fields/FieldLabel';
 import { Title } from '../primitives/Title';
@@ -117,13 +123,9 @@ export const AppearanceSettings: FC = () => {
             <IconButton
               aria-label="Zoom out"
               data-testid="settings-zoom-out"
+              disabled={!canDecreaseZoom(zoomPercentage)}
               icon={ZoomOutIcon}
-              onClick={() =>
-                zoomPercentage > 0 &&
-                window.gitify.zoom.setLevel(
-                  zoomPercentageToLevel(zoomPercentage - 10),
-                )
-              }
+              onClick={() => decreaseZoom(zoomPercentage)}
               size="small"
               unsafeDisableTooltip={true}
             />
@@ -135,13 +137,9 @@ export const AppearanceSettings: FC = () => {
             <IconButton
               aria-label="Zoom in"
               data-testid="settings-zoom-in"
+              disabled={!canIncreaseZoom(zoomPercentage)}
               icon={ZoomInIcon}
-              onClick={() =>
-                zoomPercentage < 120 &&
-                window.gitify.zoom.setLevel(
-                  zoomPercentageToLevel(zoomPercentage + 10),
-                )
-              }
+              onClick={() => increaseZoom(zoomPercentage)}
               size="small"
               unsafeDisableTooltip={true}
             />
diff --git a/src/renderer/components/settings/SystemSettings.test.tsx b/src/renderer/components/settings/SystemSettings.test.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
+import type { Percentage } from '../../types';
 import { SystemSettings } from './SystemSettings';
 
 describe('renderer/components/settings/SystemSettings.tsx', () => {
@@ -155,7 +156,7 @@ describe('renderer/components/settings/SystemSettings.tsx', () => {
             auth: mockAuth,
             settings: {
               ...mockSettings,
-              notificationVolume: 30,
+              notificationVolume: 30 as Percentage,
             },
             updateSetting,
           }}
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
@@ -8,6 +8,12 @@ import { APPLICATION } from '../../../shared/constants';
 import { AppContext } from '../../context/App';
 import { defaultSettings } from '../../context/defaults';
 import { OpenPreference } from '../../types';
+import {
+  canDecreaseVolume,
+  canIncreaseVolume,
+  decreaseVolume,
+  increaseVolume,
+} from '../../utils/notifications/sound';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
 import { VolumeDownIcon } from '../icons/VolumeDownIcon';
@@ -104,13 +110,13 @@ export const SystemSettings: FC = () => {
             <IconButton
               aria-label="Volume down"
               data-testid="settings-volume-down"
+              disabled={!canDecreaseVolume(settings.notificationVolume)}
               icon={VolumeDownIcon}
               onClick={() => {
-                const newVolume = Math.max(
-                  settings.notificationVolume - 10,
-                  10,
+                updateSetting(
+                  'notificationVolume',
+                  decreaseVolume(settings.notificationVolume),
                 );
-                updateSetting('notificationVolume', newVolume);
               }}
               size="small"
               unsafeDisableTooltip={true}
@@ -123,13 +129,13 @@ export const SystemSettings: FC = () => {
             <IconButton
               aria-label="Volume up"
               data-testid="settings-volume-up"
+              disabled={!canIncreaseVolume(settings.notificationVolume)}
               icon={VolumeUpIcon}
               onClick={() => {
-                const newVolume = Math.min(
-                  settings.notificationVolume + 10,
-                  100,
+                updateSetting(
+                  'notificationVolume',
+                  increaseVolume(settings.notificationVolume),
                 );
-                updateSetting('notificationVolume', newVolume);
               }}
               size="small"
               unsafeDisableTooltip={true}
diff --git a/src/renderer/context/defaults.ts b/src/renderer/context/defaults.ts
@@ -7,6 +7,7 @@ import {
   GroupBy,
   type NotificationSettingsState,
   OpenPreference,
+  type Percentage,
   type SettingsState,
   type SystemSettingsState,
   Theme,
@@ -20,7 +21,7 @@ export const defaultAuth: AuthState = {
 const defaultAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
   increaseContrast: false,
-  zoomPercentage: 100,
+  zoomPercentage: 100 as Percentage,
   showAccountHeader: false,
   wrapNotificationTitle: false,
 };
@@ -50,7 +51,7 @@ const defaultSystemSettings: SystemSettingsState = {
   keyboardShortcut: true,
   showNotifications: true,
   playSound: true,
-  notificationVolume: 20,
+  notificationVolume: 20 as Percentage,
   openAtStartup: false,
 };
 
diff --git a/src/renderer/hooks/useNotifications.ts b/src/renderer/hooks/useNotifications.ts
@@ -101,7 +101,7 @@ export const useNotifications = (): NotificationsState => {
 
       if (diffNotifications.length > 0) {
         if (state.settings.playSound) {
-          raiseSoundNotification(state.settings.notificationVolume / 100);
+          raiseSoundNotification(state.settings.notificationVolume);
         }
 
         if (state.settings.showNotifications) {
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
@@ -36,6 +36,8 @@ export type SearchToken = Branded<string, 'SearchToken'>;
 
 export type Status = 'loading' | 'success' | 'error';
 
+export type Percentage = Branded<number, 'Percentage'>;
+
 export interface Account {
   method: AuthMethod;
   platform: PlatformType;
@@ -53,6 +55,7 @@ export type SettingsValue =
   | FilterValue[]
   | GroupBy
   | OpenPreference
+  | Percentage
   | Theme;
 
 export type FilterValue =
@@ -71,7 +74,7 @@ export type SettingsState = AppearanceSettingsState &
 export interface AppearanceSettingsState {
   theme: Theme;
   increaseContrast: boolean;
-  zoomPercentage: number;
+  zoomPercentage: Percentage;
   showAccountHeader: boolean;
   wrapNotificationTitle: boolean;
 }
@@ -101,7 +104,7 @@ export interface SystemSettingsState {
   keyboardShortcut: boolean;
   showNotifications: boolean;
   playSound: boolean;
-  notificationVolume: number;
+  notificationVolume: Percentage;
   openAtStartup: boolean;
 }
 
diff --git a/src/renderer/utils/notifications/sound.test.ts b/src/renderer/utils/notifications/sound.test.ts
@@ -0,0 +1,28 @@
+import type { Percentage } from '../../types';
+import {
+  canDecreaseVolume,
+  canIncreaseVolume,
+  volumePercentageToLevel,
+} from './sound';
+
+describe('renderer/utils/notifications/sound.ts', () => {
+  it('should convert percentage to sound level', () => {
+    expect(volumePercentageToLevel(100 as Percentage)).toBe(1);
+    expect(volumePercentageToLevel(50 as Percentage)).toBe(0.5);
+    expect(volumePercentageToLevel(0 as Percentage)).toBe(0);
+  });
+
+  it('can decrease volume percentage', () => {
+    expect(canDecreaseVolume(-10 as Percentage)).toBe(false);
+    expect(canDecreaseVolume(0 as Percentage)).toBe(false);
+    expect(canDecreaseVolume(10 as Percentage)).toBe(true);
+    expect(canDecreaseVolume(100 as Percentage)).toBe(true);
+  });
+
+  it('can increase volume percentage', () => {
+    expect(canIncreaseVolume(10 as Percentage)).toBe(true);
+    expect(canIncreaseVolume(90 as Percentage)).toBe(true);
+    expect(canIncreaseVolume(100 as Percentage)).toBe(false);
+    expect(canIncreaseVolume(110 as Percentage)).toBe(false);
+  });
+});
diff --git a/src/renderer/utils/notifications/sound.ts b/src/renderer/utils/notifications/sound.ts
@@ -1,7 +1,56 @@
-export async function raiseSoundNotification(volume: number) {
+import type { Percentage } from '../../types';
+
+const MINIMUM_VOLUME_PERCENTAGE = 0 as Percentage;
+const MAXIMUM_VOLUME_PERCENTAGE = 100 as Percentage;
+const VOLUME_STEP = 10 as Percentage;
+
+export async function raiseSoundNotification(volume: Percentage) {
   const path = await globalThis.gitify.notificationSoundPath();
 
   const audio = new Audio(path);
-  audio.volume = volume;
+  audio.volume = volumePercentageToLevel(volume);
   audio.play();
 }
+
+/**
+ * Convert volume percentage (0-100) to level (0.0-1.0)
+ */
+export function volumePercentageToLevel(percentage: Percentage): number {
+  return percentage / 100;
+}
+
+/**
+ * Decrease volume by step amount
+ */
+export function decreaseVolume(volume: Percentage) {
+  if (canDecreaseVolume(volume)) {
+    return volume - VOLUME_STEP;
+  }
+
+  return volume;
+}
+
+/**
+ * Increase volume by step amount
+ */
+export function increaseVolume(volume: Percentage) {
+  if (canIncreaseVolume(volume)) {
+    return volume + VOLUME_STEP;
+  }
+
+  return volume;
+}
+
+/**
+ * Returns true if can increase volume percentage further
+ */
+export function canIncreaseVolume(volumePercentage: Percentage) {
+  return volumePercentage + VOLUME_STEP <= MAXIMUM_VOLUME_PERCENTAGE;
+}
+
+/**
+ * Returns true if can decrease volume percentage further
+ */
+export function canDecreaseVolume(volumePercentage: Percentage) {
+  return volumePercentage - VOLUME_STEP >= MINIMUM_VOLUME_PERCENTAGE;
+}
diff --git a/src/renderer/utils/zoom.test.ts b/src/renderer/utils/zoom.test.ts
@@ -1,13 +1,19 @@
-import { zoomLevelToPercentage, zoomPercentageToLevel } from './zoom';
+import type { Percentage } from '../types';
+import {
+  canDecreaseZoom,
+  canIncreaseZoom,
+  zoomLevelToPercentage,
+  zoomPercentageToLevel,
+} from './zoom';
 
 describe('renderer/utils/zoom.ts', () => {
   it('should convert percentage to zoom level', () => {
-    expect(zoomPercentageToLevel(100)).toBe(0);
-    expect(zoomPercentageToLevel(50)).toBe(-1);
-    expect(zoomPercentageToLevel(0)).toBe(-2);
-    expect(zoomPercentageToLevel(150)).toBe(1);
+    expect(zoomPercentageToLevel(100 as Percentage)).toBe(0);
+    expect(zoomPercentageToLevel(50 as Percentage)).toBe(-1);
+    expect(zoomPercentageToLevel(0 as Percentage)).toBe(-2);
+    expect(zoomPercentageToLevel(150 as Percentage)).toBe(1);
 
-    expect(zoomPercentageToLevel(undefined)).toBe(0);
+    expect(zoomPercentageToLevel(undefined as unknown as Percentage)).toBe(0);
   });
 
   it('should convert zoom level to percentage', () => {
@@ -18,4 +24,17 @@ describe('renderer/utils/zoom.ts', () => {
 
     expect(zoomLevelToPercentage(undefined)).toBe(100);
   });
+
+  it('can decrease zoom percentage', () => {
+    expect(canDecreaseZoom(-10 as Percentage)).toBe(false);
+    expect(canDecreaseZoom(0 as Percentage)).toBe(false);
+    expect(canDecreaseZoom(10 as Percentage)).toBe(true);
+  });
+
+  it('can increase zoom percentage', () => {
+    expect(canIncreaseZoom(10 as Percentage)).toBe(true);
+    expect(canIncreaseZoom(110 as Percentage)).toBe(true);
+    expect(canIncreaseZoom(120 as Percentage)).toBe(false);
+    expect(canIncreaseZoom(150 as Percentage)).toBe(false);
+  });
 });
diff --git a/src/renderer/utils/zoom.ts b/src/renderer/utils/zoom.ts

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ export const useNotifications = (): NotificationsState => {`
`101`	`101`
`102`	`102`	`if (diffNotifications.length > 0) {`
`103`	`103`	`if (state.settings.playSound) {`
`104`		`- raiseSoundNotification(state.settings.notificationVolume / 100);`
	`104`	`+ raiseSoundNotification(state.settings.notificationVolume);`
`105`	`105`	`}`
`106`	`106`
`107`	`107`	`if (state.settings.showNotifications) {`