diff --git a/src/renderer/components/Sidebar.test.tsx b/src/renderer/components/Sidebar.test.tsx
index 5c58f3351..864e8e6d4 100644
--- a/src/renderer/components/Sidebar.test.tsx
+++ b/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(
+
+
+ ,
+ {
+ isLoggedIn: true,
+ settings: { ...mockSettings, participating: false },
+ },
+ );
+
+ expect(screen.getByTestId('sidebar-focused-mode')).toBeInTheDocument();
+ });
+
+ it('renders the focused mode is on', () => {
+ renderWithAppContext(
+
+
+ ,
+ {
+ isLoggedIn: true,
+ settings: { ...mockSettings, participating: true },
+ },
+ );
+
+ expect(screen.getByTestId('sidebar-focused-mode')).toBeInTheDocument();
+ });
+
+ it('toggles participating when clicked', async () => {
+ renderWithAppContext(
+
+
+ ,
+ {
+ 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(
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index 0be792987..50f54ef2d 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/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 && (
- toggleFilters()}
- size="small"
- tooltipDirection="e"
- variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
- />
+ <>
+ {
+ updateSetting('participating', !settings.participating);
+ }}
+ size="small"
+ tooltipDirection="e"
+ variant={settings.participating ? 'primary' : 'invisible'}
+ />
+
+ toggleFilters()}
+ size="small"
+ tooltipDirection="e"
+ variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
+ />
+
)}
+
+ Participating and watching
+
+