feat: filter counters (#1788)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/AllRead.tsx

@@ -2,7 +2,7 @@ import { type FC, useContext, useMemo } from 'react';
 
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
-import { hasFiltersSet } from '../utils/filters';
+import { hasAnyFiltersSet } from '../utils/filters';
 import { EmojiSplash } from './layout/EmojiSplash';
 
 interface IAllRead {
@@ -12,7 +12,7 @@ interface IAllRead {
 export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
   const { settings } = useContext(AppContext);
 
-  const hasFilters = hasFiltersSet(settings);
+  const hasFilters = hasAnyFiltersSet(settings);
 
   const emoji = useMemo(
     () =>

src/renderer/components/Sidebar.tsx

@@ -16,7 +16,7 @@ import { APPLICATION } from '../../shared/constants';
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
 import { Constants } from '../utils/constants';
-import { hasFiltersSet } from '../utils/filters';
+import { hasAnyFiltersSet } from '../utils/filters';
 import {
   openGitHubIssues,
   openGitHubNotifications,
@@ -114,7 +114,7 @@ export const Sidebar: FC = () => {
             description="Filter notifications"
             unsafeDisableTooltip={false}
             size="small"
-            variant={hasFiltersSet(settings) ? 'primary' : 'invisible'}
+            variant={hasAnyFiltersSet(settings) ? 'primary' : 'invisible'}
             tooltipDirection="e"
             onClick={() => toggleFilters()}
             data-testid="sidebar-filter-notifications"

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

@@ -30,4 +30,19 @@ describe('renderer/components/fields/Checkbox.tsx', () => {
     );
     expect(tree).toMatchSnapshot();
   });
+
+  it('should render - positive counter unselected', () => {
+    const tree = render(<Checkbox {...props} counter={5} checked={false} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - positive counter selected', () => {
+    const tree = render(<Checkbox {...props} counter={5} checked={true} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render - zero counter', () => {
+    const tree = render(<Checkbox {...props} counter={0} />);
+    expect(tree).toMatchSnapshot();
+  });
 });

src/renderer/components/fields/Checkbox.tsx

@@ -1,13 +1,14 @@
 import type { FC, ReactNode } from 'react';
 
-import { Stack } from '@primer/react';
+import { CounterLabel, Stack } from '@primer/react';
 
 import { cn } from '../../utils/cn';
 import { Tooltip } from './Tooltip';
 
 export interface ICheckbox {
   name: string;
   label: string;
+  counter?: number;
   tooltip?: ReactNode | string;
   checked: boolean;
   disabled?: boolean;
@@ -19,6 +20,8 @@ export const Checkbox: FC<ICheckbox> = ({
   visible = true,
   ...props
 }: ICheckbox) => {
+  const counter = props.counter > 0 ? props.counter : undefined;
+
   return (
     visible && (
       <Stack
@@ -46,9 +49,16 @@ export const Checkbox: FC<ICheckbox> = ({
         >
           {props.label}
         </label>
+
         {props.tooltip && (
           <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
         )}
+
+        {counter && (
+          <CounterLabel scheme={props.checked ? 'primary' : 'secondary'}>
+            {counter}
+          </CounterLabel>
+        )}
       </Stack>
     )
   );

src/renderer/components/fields/Tooltip.tsx

@@ -19,7 +19,7 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
       onMouseLeave={() => setShowTooltip(false)}
       data-testid={`tooltip-${props.name}`}
     >
-      <QuestionIcon className="ml-1 text-gitify-tooltip-icon" />
+      <QuestionIcon className="text-gitify-tooltip-icon" />
       {showTooltip && (
         <Box className="absolute left-[-80px] z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout">
           <Box className="text-left text-xs text-gitify-font">