feat(sidebar): focused mode toggle (participating vs participating+watching)

src/renderer/components/Sidebar.test.tsx

@@ -16,6 +16,7 @@ jest.mock('react-router-dom', () => ({
 
 describe('renderer/components/Sidebar.tsx', () => {
   const fetchNotificationsMock = jest.fn();
+  const updateSettingMock = jest.fn();
   const openExternalLinkSpy = jest
     .spyOn(comms, 'openExternalLink')
     .mockImplementation();
@@ -106,6 +107,55 @@ describe('renderer/components/Sidebar.tsx', () => {
     });
   });
 
+  describe('Focused mode toggle', () => {
+    it('renders the focused mode is off', () => {
+      renderWithAppContext(
+        <MemoryRouter>
+          <Sidebar />
+        </MemoryRouter>,
+        {
+          isLoggedIn: true,
+          settings: { ...mockSettings, participating: false },
+        },
+      );
+
+      expect(screen.getByTestId('sidebar-focused-mode')).toBeInTheDocument();
+    });
+
+    it('renders the focused mode is on', () => {
+      renderWithAppContext(
+        <MemoryRouter>
+          <Sidebar />
+        </MemoryRouter>,
+        {
+          isLoggedIn: true,
+          settings: { ...mockSettings, participating: true },
+        },
+      );
+
+      expect(screen.getByTestId('sidebar-focused-mode')).toBeInTheDocument();
+    });
+
+    it('toggles participating when clicked', async () => {
+      renderWithAppContext(
+        <MemoryRouter>
+          <Sidebar />
+        </MemoryRouter>,
+        {
+          isLoggedIn: true,
+          settings: { ...mockSettings, participating: false },
+          updateSetting: updateSettingMock,
+          fetchNotifications: fetchNotificationsMock,
+        },
+      );
+
+      await userEvent.click(screen.getByTestId('sidebar-focused-mode'));
+
+      expect(updateSettingMock).toHaveBeenCalledTimes(1);
+      expect(updateSettingMock).toHaveBeenCalledWith('participating', true);
+    });
+  });
+
   describe('Filter notifications', () => {
     it('go to the filters route', async () => {
       renderWithAppContext(

src/renderer/components/Sidebar.tsx

@@ -3,6 +3,8 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import {
   BellIcon,
+  CrosshairsIcon,
+  EyeIcon,
   FilterIcon,
   GearIcon,
   GitPullRequestIcon,
@@ -37,6 +39,7 @@ export const Sidebar: FC = () => {
     auth,
     unreadNotificationCount,
     hasUnreadNotifications,
+    updateSetting,
   } = useAppContext();
 
   const primaryAccountHostname = getPrimaryAccountHostname(auth);
@@ -98,16 +101,35 @@ export const Sidebar: FC = () => {
         />
 
         {isLoggedIn && (
-          <IconButton
-            aria-label="Filters"
-            data-testid="sidebar-filter-notifications"
-            description="Filter notifications"
-            icon={FilterIcon}
-            onClick={() => toggleFilters()}
-            size="small"
-            tooltipDirection="e"
-            variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
-          />
+          <>
+            <IconButton
+              aria-label="Toggle focused mode"
+              data-testid="sidebar-focused-mode"
+              description={
+                settings.participating
+                  ? 'Focused (participating only)'
+                  : 'Participating and watching'
+              }
+              icon={settings.participating ? CrosshairsIcon : EyeIcon}
+              onClick={() => {
+                updateSetting('participating', !settings.participating);
+              }}
+              size="small"
+              tooltipDirection="e"
+              variant={settings.participating ? 'primary' : 'invisible'}
+            />
+
+            <IconButton
+              aria-label="Filters"
+              data-testid="sidebar-filter-notifications"
+              description="Filter notifications"
+              icon={FilterIcon}
+              onClick={() => toggleFilters()}
+              size="small"
+              tooltipDirection="e"
+              variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
+            />
+          </>
         )}
 
         <IconButton