feat: reset to default settings

src/components/settings/AppearanceSettings.tsx

@@ -25,7 +25,7 @@ export const AppearanceSettings: FC = () => {
   }, [settings.theme]);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="appearance" className="mb-1 mt-2 font-semibold">
         Appearance
       </legend>

src/components/settings/NotificationSettings.tsx

@@ -9,7 +9,7 @@ export const NotificationSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="notifications" className="mb-1 mt-2 font-semibold">
         Notifications
       </legend>

src/components/settings/SystemSettings.tsx

@@ -8,7 +8,7 @@ export const SystemSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="system" className="mb-1 mt-2 font-semibold">
         System
       </legend>

src/context/App.test.tsx

@@ -475,5 +475,37 @@ describe('context/App.tsx', () => {
         },
       });
     });
+
+    it('should call resetSettings', async () => {
+      const saveStateMock = jest
+        .spyOn(storage, 'saveState')
+        .mockImplementation(jest.fn());
+
+      const TestComponent = () => {
+        const { resetSettings } = useContext(AppContext);
+
+        return (
+          <button type="button" onClick={() => resetSettings()}>
+            Test Case
+          </button>
+        );
+      };
+
+      const { getByText } = customRender(<TestComponent />);
+
+      act(() => {
+        fireEvent.click(getByText('Test Case'));
+      });
+
+      expect(saveStateMock).toHaveBeenCalledWith({
+        auth: {
+          accounts: [],
+          enterpriseAccounts: [],
+          token: null,
+          user: null,
+        } as AuthState,
+        settings: defaultSettings,
+      });
+    });
   });
 });

src/context/App.tsx

@@ -96,8 +96,9 @@ interface AppContextState {
   markRepoNotificationsDone: (notification: Notification) => Promise<void>;
 
   settings: SettingsState;
-  updateSetting: (name: keyof SettingsState, value: SettingsValue) => void;
   clearFilters: () => void;
+  resetSettings: () => void;
+  updateSetting: (name: keyof SettingsState, value: SettingsValue) => void;
 }
 
 export const AppContext = createContext<Partial<AppContextState>>({});
@@ -149,6 +150,17 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     setKeyboardShortcut(settings.keyboardShortcut);
   }, [settings.keyboardShortcut]);
 
+  const clearFilters = useCallback(() => {
+    const newSettings = { ...settings, ...defaultFilters };
+    setSettings(newSettings);
+    saveState({ auth, settings: newSettings });
+  }, [auth]);
+
+  const resetSettings = useCallback(() => {
+    setSettings(defaultSettings);
+    saveState({ auth, settings: defaultSettings });
+  }, [auth]);
+
   const updateSetting = useCallback(
     (name: keyof SettingsState, value: SettingsValue) => {
       if (name === 'openAtStartup') {
@@ -162,12 +174,6 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     [auth, settings],
   );
 
-  const clearFilters = useCallback(() => {
-    const newSettings = { ...settings, ...defaultFilters };
-    setSettings(newSettings);
-    saveState({ auth, settings: newSettings });
-  }, [auth]);
-
   const isLoggedIn = useMemo(() => {
     return auth.accounts.length > 0;
   }, [auth]);
@@ -299,8 +305,9 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         markRepoNotificationsDone: markRepoNotificationsDoneWithAccounts,
 
         settings,
-        updateSetting,
         clearFilters,
+        resetSettings,
+        updateSetting,
       }}
     >
       {children}

src/routes/Settings.test.tsx

@@ -14,6 +14,7 @@ jest.mock('react-router-dom', () => ({
 describe('routes/Settings.tsx', () => {
   let originalPlatform: NodeJS.Platform;
   const fetchNotifications = jest.fn();
+  const resetSettings = jest.fn();
 
   beforeAll(() => {
     // Save the original platform value
@@ -72,4 +73,50 @@ describe('routes/Settings.tsx', () => {
     expect(fetchNotifications).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
   });
+
+  it('should reset default settings when `OK`', async () => {
+    window.confirm = jest.fn(() => true); // always click 'OK'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByText('Restore settings to their defaults'));
+    expect(resetSettings).toHaveBeenCalled();
+  });
+
+  it('should skip reset default settings when `cancelled`', async () => {
+    window.confirm = jest.fn(() => false); // always click 'cancel'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByText('Restore settings to their defaults'));
+    expect(resetSettings).not.toHaveBeenCalled();
+  });
 });

src/routes/Settings.tsx

@@ -1,19 +1,31 @@
-import type { FC } from 'react';
+import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
 import { NotificationSettings } from '../components/settings/NotificationSettings';
 import { SettingsFooter } from '../components/settings/SettingsFooter';
 import { SystemSettings } from '../components/settings/SystemSettings';
+import { AppContext } from '../context/App';
 
 export const SettingsRoute: FC = () => {
+  const { resetSettings } = useContext(AppContext);
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
       <Header fetchOnBack={true}>Settings</Header>
 
-      <div className="flex-grow overflow-x-auto px-8">
+      <div className="flex flex-col flex-grow overflow-x-auto px-8 gap-3">
         <AppearanceSettings />
         <NotificationSettings />
         <SystemSettings />
+        <button
+          type="button"
+          onClick={() => {
+            confirm('Are you sure you want to reset all settings?') &&
+              resetSettings();
+          }}
+          className="text-sm hover:underline mb-4 hover:cursor-pointer"
+        >
+          Restore settings to their defaults
+        </button>
       </div>
 
       <SettingsFooter />