refactor(settings): refresh controls with Primer

Add settings control wrappers for compact toggles, segmented choices, selects, custom rows, dividers, and animated dependent reveals.

Migrate Appearance, Inbox, Alerts, Tray, and System to the wrappers; restore detailed secondary tooltips; remove the settings-only custom RadioGroup; and keep Checkbox for filter multi-select.

Fix the settings footer scroll issue by constraining the contents pane and document overflow. Update snapshots and visual baselines.

Author: setchy

src/renderer/App.css

@@ -495,6 +495,7 @@ html,
 body,
 #root {
   height: 100%;
+  overflow: hidden;
   -webkit-user-select: none;
   user-select: none;
 }

src/renderer/components/fields/RadioGroup.test.tsx

@@ -22,7 +22,7 @@ export function Contents({
   return (
     <div
       className={cn(
-        'grow overflow-x-hidden overflow-y-auto',
+        'grow min-h-0 overflow-x-hidden overflow-y-auto',
         paddingHorizontal && 'px-5',
         paddingBottom && 'pb-2',
         scrollFade && 'gitify-scroll-fade',

src/renderer/components/fields/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import { act, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { renderWithProviders } from '../../__helpers__/test-utils';
@@ -20,79 +20,75 @@ describe('renderer/components/settings/AlertSettings.tsx', () => {
   });
 
   it.each([
-    ['checkbox-showNotifications', 'showNotifications'],
-    ['checkbox-playSound', 'playSound'],
-    ['checkbox-showUpdateNotifications', 'showUpdateNotifications'],
-  ] as const)('should toggle %s checkbox', async (testId, setting) => {
-    await act(async () => {
-      renderWithProviders(<AlertSettings />);
-    });
+    ['Show desktop notifications', 'showNotifications'],
+    ['Play notification sound', 'playSound'],
+    ['Show app update notifications', 'showUpdateNotifications'],
+  ] as const)('should toggle %s switch', async (label, setting) => {
+    renderWithProviders(<AlertSettings />);
 
-    await userEvent.click(screen.getByTestId(testId));
+    await userEvent.click(screen.getByRole('button', { name: label }));
 
     expect(toggleSettingSpy).toHaveBeenCalledTimes(1);
     expect(toggleSettingSpy).toHaveBeenCalledWith(setting);
   });
 
-  describe('playSound', () => {
-    it('should explain when the sound plays and what the volume controls do', async () => {
-      renderWithProviders(<AlertSettings />);
+  it('shows detailed help in tooltips', async () => {
+    renderWithProviders(<AlertSettings />);
 
-      const soundHelp =
-        'Play a sound when new unread notifications arrive after filtering. Use the adjacent volume controls to adjust the sound level.';
+    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-playSound'));
 
-      const tooltipTrigger = screen.getByRole('button', { name: 'tooltip-playSound' });
+    expect(
+      screen.getByText(
+        'Play a sound when new unread notifications arrive after filtering. Use the notification volume controls to adjust the sound level.',
+      ),
+    ).toBeInTheDocument();
+  });
 
-      expect(screen.queryByText(soundHelp)).not.toBeInTheDocument();
+  it('shows notification volume and its tooltip when sound is enabled', async () => {
+    renderWithProviders(<AlertSettings />);
 
-      await userEvent.click(tooltipTrigger);
+    expect(screen.getByText('Notification volume')).toBeInTheDocument();
+    expect(screen.getByTestId('reveal-volume')).toHaveAttribute('data-state', 'open');
 
-      expect(screen.getByText(soundHelp)).toBeInTheDocument();
-    });
+    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-notificationVolume'));
 
-    it('volume controls should not be shown if playSound checkbox is false', async () => {
-      renderWithProviders(<AlertSettings />, {
-        settings: { ...mockSettings, playSound: false },
-      });
+    expect(screen.getByText('Adjust the volume of the notification sound.')).toBeInTheDocument();
+  });
 
-      expect(screen.queryByTestId('settings-volume-group')).not.toBeInTheDocument();
+  it('hides volume controls when playSound is false', () => {
+    renderWithProviders(<AlertSettings />, {
+      settings: { ...mockSettings, playSound: false },
     });
 
-    it('volume controls should be shown if playSound checkbox is true', async () => {
-      renderWithProviders(<AlertSettings />, {
-        settings: { ...mockSettings, playSound: true },
-      });
+    expect(screen.getByTestId('reveal-volume')).toHaveAttribute('data-state', 'closed');
+  });
 
-      expect(screen.getByTestId('settings-volume-group')).toBeInTheDocument();
-    });
+  it('should increase notification volume', async () => {
+    renderWithProviders(<AlertSettings />);
 
-    it('should increase notification volume', async () => {
-      renderWithProviders(<AlertSettings />);
+    await userEvent.click(screen.getByTestId('settings-volume-up'));
 
-      await userEvent.click(screen.getByTestId('settings-volume-up'));
+    expect(updateSettingSpy).toHaveBeenCalledTimes(1);
+    expect(updateSettingSpy).toHaveBeenCalledWith('notificationVolume', 30);
+  });
 
-      expect(updateSettingSpy).toHaveBeenCalledTimes(1);
-      expect(updateSettingSpy).toHaveBeenCalledWith('notificationVolume', 30);
-    });
+  it('should decrease notification volume', async () => {
+    renderWithProviders(<AlertSettings />);
 
-    it('should decrease notification volume', async () => {
-      renderWithProviders(<AlertSettings />);
+    await userEvent.click(screen.getByTestId('settings-volume-down'));
 
-      await userEvent.click(screen.getByTestId('settings-volume-down'));
+    expect(updateSettingSpy).toHaveBeenCalledTimes(1);
+    expect(updateSettingSpy).toHaveBeenCalledWith('notificationVolume', 10);
+  });
 
-      expect(updateSettingSpy).toHaveBeenCalledTimes(1);
-      expect(updateSettingSpy).toHaveBeenCalledWith('notificationVolume', 10);
+  it('should reset notification volume', async () => {
+    renderWithProviders(<AlertSettings />, {
+      settings: { ...mockSettings, notificationVolume: 30 as Percentage },
     });
 
-    it('should reset notification volume', async () => {
-      renderWithProviders(<AlertSettings />, {
-        settings: { ...mockSettings, notificationVolume: 30 as Percentage },
-      });
+    await userEvent.click(screen.getByTestId('settings-volume-reset'));
 
-      await userEvent.click(screen.getByTestId('settings-volume-reset'));
-
-      expect(updateSettingSpy).toHaveBeenCalledTimes(1);
-      expect(updateSettingSpy).toHaveBeenCalledWith('notificationVolume', 20);
-    });
+    expect(updateSettingSpy).toHaveBeenCalledTimes(1);
+    expect(updateSettingSpy).toHaveBeenCalledWith('notificationVolume', 20);
   });
 });