Add font size slider. Closes #132.

frontend/src/test/fontScale.test.ts

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  applyFontScale,
+  DEFAULT_FONT_SCALE,
+  FONT_SCALE_KEY,
+  MAX_FONT_SCALE,
+  MIN_FONT_SCALE,
+  getSavedFontScale,
+  setSavedFontScale,
+} from '../utils/fontScale';
+
+describe('fontScale utilities', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.style.fontSize = '';
+  });
+
+  afterEach(() => {
+    document.documentElement.style.fontSize = '';
+  });
+
+  it('defaults to 100% when nothing is saved', () => {
+    expect(getSavedFontScale()).toBe(DEFAULT_FONT_SCALE);
+  });
+
+  it('reads a saved scale from localStorage', () => {
+    localStorage.setItem(FONT_SCALE_KEY, '135');
+
+    expect(getSavedFontScale()).toBe(135);
+  });
+
+  it('falls back to the default when the saved value is invalid', () => {
+    localStorage.setItem(FONT_SCALE_KEY, 'giant');
+
+    expect(getSavedFontScale()).toBe(DEFAULT_FONT_SCALE);
+  });
+
+  it('applies the scale to the document root', () => {
+    expect(applyFontScale(150)).toBe(150);
+    expect(document.documentElement.style.fontSize).toBe('150%');
+  });
+
+  it('stores non-default values and applies them immediately', () => {
+    expect(setSavedFontScale(137.5)).toBe(137.5);
+    expect(localStorage.getItem(FONT_SCALE_KEY)).toBe('137.5');
+    expect(document.documentElement.style.fontSize).toBe('137.5%');
+  });
+
+  it('removes the saved value when returning to the default scale', () => {
+    localStorage.setItem(FONT_SCALE_KEY, '150');
+
+    expect(setSavedFontScale(DEFAULT_FONT_SCALE)).toBe(DEFAULT_FONT_SCALE);
+    expect(localStorage.getItem(FONT_SCALE_KEY)).toBeNull();
+    expect(document.documentElement.style.fontSize).toBe('100%');
+  });
+
+  it('clamps saved and applied values to the supported range', () => {
+    localStorage.setItem(FONT_SCALE_KEY, '900');
+    expect(getSavedFontScale()).toBe(MAX_FONT_SCALE);
+
+    expect(setSavedFontScale(5)).toBe(MIN_FONT_SCALE);
+    expect(localStorage.getItem(FONT_SCALE_KEY)).toBe(String(MIN_FONT_SCALE));
+    expect(document.documentElement.style.fontSize).toBe(`${MIN_FONT_SCALE}%`);
+  });
+});

frontend/src/test/settingsModal.test.tsx

@@ -20,6 +20,12 @@ import {
 } from '../utils/lastViewedConversation';
 import { api } from '../api';
 import { DISTANCE_UNIT_KEY } from '../utils/distanceUnits';
+import {
+  DEFAULT_FONT_SCALE,
+  FONT_SCALE_KEY,
+  MAX_FONT_SCALE,
+  MIN_FONT_SCALE,
+} from '../utils/fontScale';
 
 const baseConfig: RadioConfig = {
   public_key: 'aa'.repeat(32),
@@ -186,6 +192,7 @@ describe('SettingsModal', () => {
     vi.restoreAllMocks();
     localStorage.clear();
     window.location.hash = '';
+    document.documentElement.style.fontSize = '';
   });
 
   it('refreshes app settings when opened', async () => {
@@ -549,6 +556,55 @@ describe('SettingsModal', () => {
     expect(localStorage.getItem(DISTANCE_UNIT_KEY)).toBe('smoots');
   });
 
+  it('defaults relative font size to 100% and exposes the expected input bounds', () => {
+    renderModal();
+    openLocalSection();
+
+    const slider = screen.getByLabelText('Relative font size slider');
+    const input = screen.getByLabelText('Relative font size percentage');
+
+    expect(slider).toHaveValue(String(DEFAULT_FONT_SCALE));
+    expect(slider).toHaveAttribute('step', '5');
+    expect(input).toHaveValue(DEFAULT_FONT_SCALE);
+    expect(input).toHaveAttribute('min', String(MIN_FONT_SCALE));
+    expect(input).toHaveAttribute('max', String(MAX_FONT_SCALE));
+  });
+
+  it('stores and applies relative font size changes locally', async () => {
+    renderModal();
+    openLocalSection();
+
+    const slider = screen.getByLabelText('Relative font size slider');
+
+    fireEvent.change(slider, { target: { value: '135' } });
+
+    expect(localStorage.getItem(FONT_SCALE_KEY)).toBeNull();
+    expect(document.documentElement.style.fontSize).toBe('');
+
+    fireEvent.mouseUp(slider);
+
+    await waitFor(() => {
+      expect(localStorage.getItem(FONT_SCALE_KEY)).toBe('135');
+      expect(document.documentElement.style.fontSize).toBe('135%');
+    });
+
+    fireEvent.change(screen.getByLabelText('Relative font size percentage'), {
+      target: { value: '137.5' },
+    });
+
+    await waitFor(() => {
+      expect(localStorage.getItem(FONT_SCALE_KEY)).toBe('137.5');
+      expect(document.documentElement.style.fontSize).toBe('137.5%');
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Reset' }));
+
+    await waitFor(() => {
+      expect(localStorage.getItem(FONT_SCALE_KEY)).toBeNull();
+      expect(document.documentElement.style.fontSize).toBe('100%');
+    });
+  });
+
   it('purges decrypted raw packets via maintenance endpoint action', async () => {
     const runMaintenanceSpy = vi.spyOn(api, 'runMaintenance').mockResolvedValue({
       packets_deleted: 12,