refactor: layout components

src/renderer/App.tsx

@@ -7,9 +7,9 @@ import {
   useLocation,
 } from 'react-router-dom';
 
-import { BaseStyles, Box, ThemeProvider } from '@primer/react';
+import { BaseStyles, ThemeProvider } from '@primer/react';
 
-import { Sidebar } from './components/Sidebar';
+import { AppLayout } from './components/layout/AppLayout';
 import { AppContext, AppProvider } from './context/App';
 import { AccountsRoute } from './routes/Accounts';
 import { FiltersRoute } from './routes/Filters';
@@ -38,8 +38,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <Box className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-sidebar bg-gitify-background">
-              <Sidebar />
+            <AppLayout>
               <Routes>
                 <Route
                   path="/"
@@ -83,7 +82,7 @@ export const App = () => {
                   element={<LoginWithOAuthAppRoute />}
                 />
               </Routes>
-            </Box>
+            </AppLayout>
           </Router>
         </AppProvider>
       </BaseStyles>

src/renderer/components/fields/Checkbox.tsx

@@ -1,8 +1,8 @@
+import { Stack } from '@primer/react';
 import type { FC, ReactNode } from 'react';
 
-import { CounterLabel, Stack } from '@primer/react';
-
 import { cn } from '../../utils/cn';
+import { CustomCounter } from '../primitives/CustomCounter';
 import { Tooltip } from './Tooltip';
 
 export interface ICheckbox {
@@ -20,7 +20,7 @@ export const Checkbox: FC<ICheckbox> = ({
   visible = true,
   ...props
 }: ICheckbox) => {
-  const counter = props.counter > 0 ? props.counter : undefined;
+  const counter = props?.counter === 0 ? '0' : props.counter;
 
   return (
     visible && (
@@ -54,11 +54,12 @@ export const Checkbox: FC<ICheckbox> = ({
           <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
         )}
 
-        {counter ? (
-          <CounterLabel scheme={props.checked ? 'primary' : 'secondary'}>
-            {counter}
-          </CounterLabel>
-        ) : null}
+        {counter && (
+          <CustomCounter
+            scheme={props.checked ? 'primary' : 'secondary'}
+            value={counter}
+          />
+        )}
       </Stack>
     )
   );

src/renderer/components/filters/ReasonFilter.tsx

@@ -17,8 +17,9 @@ export const ReasonFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-reasons" className="mb-3">
+    <fieldset id="filter-reasons">
       <Title icon={NoteIcon}>Reason</Title>
+
       <Stack direction="vertical" gap="condensed">
         {Object.keys(FORMATTED_REASONS).map((reason: Reason) => {
           const reasonDetails = getReasonDetails(reason);

src/renderer/components/filters/StateFilter.tsx

@@ -19,8 +19,8 @@ export const StateFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-state" className="mb-3">
-      <Stack direction="horizontal" gap="condensed" align="baseline">
+    <fieldset id="filter-state">
+      <Stack direction="horizontal" gap="condensed">
         <Title icon={IssueOpenedIcon}>State</Title>
         <Tooltip
           name="tooltip-filter-state"

src/renderer/components/filters/SubjectTypeFilter.tsx

@@ -19,7 +19,7 @@ export const SubjectTypeFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-subject-type" className="mb-3">
+    <fieldset id="filter-subject-type">
       <Stack direction="horizontal" gap="condensed" align="baseline">
         <Title icon={BellIcon}>Type</Title>
         <Tooltip

src/renderer/components/filters/UserHandleFilter.tsx

@@ -119,7 +119,7 @@ export const UserHandleFilter: FC = () => {
   };
 
   return (
-    <fieldset id="filter-user-handles" className="mb-3">
+    <fieldset id="filter-user-handles">
       <Stack direction="horizontal" gap="condensed" align="baseline">
         <Title icon={MentionIcon}>Handles</Title>
         <Tooltip

src/renderer/components/filters/UserTypeFilter.tsx

@@ -25,8 +25,8 @@ export const UserTypeFilter: FC = () => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
-    <fieldset id="filter-user-types" className="mb-3">
-      <Stack direction="horizontal" gap="condensed" align="baseline">
+    <fieldset id="filter-user-types">
+      <Stack direction="horizontal" gap="condensed">
         <Title icon={FeedPersonIcon}>User Type</Title>
         <Tooltip
           name="tooltip-filter-user-type"