From 90244dbc6b878473a7a788d18a202a48ae02ce54 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Sun, 3 Mar 2024 19:34:13 +0100
Subject: [PATCH 1/7] feat: group by date/repository

---
 src/components/AccountNotifications.tsx       | 26 ++++-
 src/components/NotificationRow.test.tsx       |  6 ++
 src/components/NotificationRow.tsx            |  7 ++
 src/components/Repository.test.tsx            |  1 +
 src/components/Repository.tsx                 | 49 +++++-----
 .../AccountNotifications.test.tsx.snap        | 94 ++++++++++++++-----
 6 files changed, 134 insertions(+), 49 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index e28cfaffc..43490cc01 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
 
 import { Notification } from '../typesGithub';
@@ -13,6 +13,10 @@ interface IProps {
 export const AccountNotifications = (props: IProps) => {
   const { hostname, showAccountHostname, notifications } = props;
 
+  const [groupType, setGroupType] = useState<'repository' | 'date'>(
+    'repository',
+  );
+
   const groupedNotifications = Object.values(
     notifications.reduce(
       (acc: { [key: string]: Notification[] }, notification) => {
@@ -27,6 +31,10 @@ export const AccountNotifications = (props: IProps) => {
 
   const Chevron = notifications.length > 0 ? ChevronDownIcon : ChevronLeftIcon;
 
+  const handleGroupTypeChange = (type: 'repository' | 'date') => {
+    setGroupType(type);
+  };
+
   return (
     <>
       {showAccountHostname && (
@@ -37,15 +45,29 @@ export const AccountNotifications = (props: IProps) => {
         </div>
       )}
 
+      <label className="flex items-center">
+        Group by:
+        <select
+          value={groupType}
+          onChange={(e) =>
+            handleGroupTypeChange(e.target.value as 'repository' | 'date')
+          }
+          className="ml-2 border border-gray-300 rounded p-2"
+        >
+          <option value="repository">Repository</option>
+          <option value="date">Date</option>
+        </select>
+      </label>
+
       {Object.values(groupedNotifications).map((repoNotifications) => {
         const repoSlug = repoNotifications[0].repository.full_name;
-
         return (
           <RepositoryNotifications
             key={repoSlug}
             hostname={hostname}
             repoName={repoSlug}
             repoNotifications={repoNotifications}
+            groupType={groupType}
           />
         );
       })}
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index 9158a62d6..c33906554 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/src/components/NotificationRow.test.tsx
@@ -24,6 +24,7 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
+      groupType: 'repository',
     };
 
     const tree = TestRenderer.create(<NotificationRow {...props} />);
@@ -36,6 +37,7 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
+      groupType: 'repository',
     };
 
     const { getByRole } = render(
@@ -61,6 +63,7 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
+      groupType: 'repository',
     };
 
     const { getByRole } = render(
@@ -86,6 +89,7 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
+      groupType: 'repository',
     };
 
     const { getByTitle } = render(
@@ -111,6 +115,7 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
+      groupType: 'repository',
     };
 
     const { getByTitle } = render(
@@ -136,6 +141,7 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
+      groupType: 'repository',
     };
 
     const { getByLabelText } = render(
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 44c049c0a..7fcb2b537 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -14,11 +14,13 @@ import { AppContext } from '../context/App';
 interface IProps {
   hostname: string;
   notification: Notification;
+  groupType: string;
 }
 
 export const NotificationRow: React.FC<IProps> = ({
   notification,
   hostname,
+  groupType,
 }) => {
   const {
     settings,
@@ -73,6 +75,11 @@ export const NotificationRow: React.FC<IProps> = ({
         onClick={() => pressTitle()}
         role="main"
       >
+        {groupType === 'date' && (
+          <div className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden">
+            {notification.repository.full_name}
+          </div>
+        )}
         <div className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden">
           {notification.subject.title}
         </div>
diff --git a/src/components/Repository.test.tsx b/src/components/Repository.test.tsx
index 9eaa7aec5..f40546b89 100644
--- a/src/components/Repository.test.tsx
+++ b/src/components/Repository.test.tsx
@@ -20,6 +20,7 @@ describe('components/Repository.tsx', () => {
     hostname: 'github.com',
     repoName: 'manosim/gitify',
     repoNotifications: mockedGithubNotifications,
+    groupType: 'repository',
   };
 
   beforeEach(() => {
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 7cf0ed8ca..6a95ee481 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -11,12 +11,14 @@ interface IProps {
   hostname: string;
   repoNotifications: Notification[];
   repoName: string;
+  groupType: string;
 }
 
 export const RepositoryNotifications: React.FC<IProps> = ({
   repoName,
   repoNotifications,
   hostname,
+  groupType,
 }) => {
   const { markRepoNotifications, markRepoNotificationsDone } =
     useContext(AppContext);
@@ -40,32 +42,34 @@ export const RepositoryNotifications: React.FC<IProps> = ({
 
   return (
     <>
-      <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white">
-        <div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
-          <img className="rounded w-5 h-5" src={avatarUrl} />
-          <span onClick={openBrowser}>{repoName}</span>
-        </div>
+      {groupType === 'repository' && (
+        <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white">
+          <div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
+            <img className="rounded w-5 h-5" src={avatarUrl} />
+            <span onClick={openBrowser}>{repoName}</span>
+          </div>
 
-        <div className="flex justify-center items-center gap-2">
-          <button
-            className="focus:outline-none h-full hover:text-green-500"
-            title="Mark Repository as Done"
-            onClick={markRepoAsDone}
-          >
-            <CheckIcon size={16} aria-label="Mark Repository as Done" />
-          </button>
+          <div className="flex justify-center items-center gap-2">
+            <button
+              className="focus:outline-none h-full hover:text-green-500"
+              title="Mark Repository as Done"
+              onClick={markRepoAsDone}
+            >
+              <CheckIcon size={16} aria-label="Mark Repository as Done" />
+            </button>
 
-          <div className="w-[14px]" />
+            <div className="w-[14px]" />
 
-          <button
-            className="focus:outline-none h-full hover:text-green-500"
-            title="Mark Repository as Read"
-            onClick={markRepoAsRead}
-          >
-            <ReadIcon size={14} aria-label="Mark Repository as Read" />
-          </button>
+            <button
+              className="focus:outline-none h-full hover:text-green-500"
+              title="Mark Repository as Read"
+              onClick={markRepoAsRead}
+            >
+              <ReadIcon size={14} aria-label="Mark Repository as Read" />
+            </button>
+          </div>
         </div>
-      </div>
+      )}
 
       <TransitionGroup>
         {repoNotifications.map((obj) => (
@@ -74,6 +78,7 @@ export const RepositoryNotifications: React.FC<IProps> = ({
               key={obj.id}
               hostname={hostname}
               notification={obj}
+              groupType={groupType}
             />
           </CSSTransition>
         ))}
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 1e14664e4..476586a04 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -29,6 +29,27 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       />
     </svg>
   </div>,
+  <label
+    className="flex items-center"
+  >
+    Group by:
+    <select
+      className="ml-2 border border-gray-300 rounded p-2"
+      onChange={[Function]}
+      value="repository"
+    >
+      <option
+        value="repository"
+      >
+        Repository
+      </option>
+      <option
+        value="date"
+      >
+        Date
+      </option>
+    </select>
+  </label>,
   <div>
     Repository
   </div>,
@@ -36,31 +57,54 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
 `;
 
 exports[`components/AccountNotifications.tsx should render itself (github.com without notifications) 1`] = `
-<div
-  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm"
->
-  github.com
-  <svg
-    aria-hidden="true"
-    className="octicon octicon-chevron-left"
-    fill="currentColor"
-    focusable="false"
-    height={20}
-    role="img"
-    style={
-      {
-        "display": "inline-block",
-        "overflow": "visible",
-        "userSelect": "none",
-        "verticalAlign": "text-bottom",
+[
+  <div
+    className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm"
+  >
+    github.com
+    <svg
+      aria-hidden="true"
+      className="octicon octicon-chevron-left"
+      fill="currentColor"
+      focusable="false"
+      height={20}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
       }
-    }
-    viewBox="0 0 16 16"
-    width={20}
+      viewBox="0 0 16 16"
+      width={20}
+    >
+      <path
+        d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
+      />
+    </svg>
+  </div>,
+  <label
+    className="flex items-center"
   >
-    <path
-      d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
-    />
-  </svg>
-</div>
+    Group by:
+    <select
+      className="ml-2 border border-gray-300 rounded p-2"
+      onChange={[Function]}
+      value="repository"
+    >
+      <option
+        value="repository"
+      >
+        Repository
+      </option>
+      <option
+        value="date"
+      >
+        Date
+      </option>
+    </select>
+  </label>,
+]
 `;

From aeae79582b3a71d0139d03037ef3a11652d3fc26 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Sun, 3 Mar 2024 20:11:51 +0100
Subject: [PATCH 2/7] dropdown button styles

---
 src/components/AccountNotifications.tsx       |  6 +++---
 .../AccountNotifications.test.tsx.snap        | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 43490cc01..5d735ed20 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -45,14 +45,14 @@ export const AccountNotifications = (props: IProps) => {
         </div>
       )}
 
-      <label className="flex items-center">
-        Group by:
+      <label className="flex items-center text-sm font-light p-2">
+        <span className="text-gray-200 mr-2 font-semibold">Group by:</span>
         <select
           value={groupType}
           onChange={(e) =>
             handleGroupTypeChange(e.target.value as 'repository' | 'date')
           }
-          className="ml-2 border border-gray-300 rounded p-2"
+          className="border border-gray-300 font-semibold rounded p-2 focus:outline-none focus:border-blue-400 dark:bg-[#090e15] dark:text-white"
         >
           <option value="repository">Repository</option>
           <option value="date">Date</option>
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 476586a04..781c65773 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -30,11 +30,15 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
     </svg>
   </div>,
   <label
-    className="flex items-center"
+    className="flex items-center text-sm font-light p-2"
   >
-    Group by:
+    <span
+      className="text-gray-200 mr-2 font-semibold"
+    >
+      Group by:
+    </span>
     <select
-      className="ml-2 border border-gray-300 rounded p-2"
+      className="border border-gray-300 font-semibold rounded p-2 focus:outline-none focus:border-blue-400 dark:bg-[#090e15] dark:text-white"
       onChange={[Function]}
       value="repository"
     >
@@ -86,11 +90,15 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
     </svg>
   </div>,
   <label
-    className="flex items-center"
+    className="flex items-center text-sm font-light p-2"
   >
-    Group by:
+    <span
+      className="text-gray-200 mr-2 font-semibold"
+    >
+      Group by:
+    </span>
     <select
-      className="ml-2 border border-gray-300 rounded p-2"
+      className="border border-gray-300 font-semibold rounded p-2 focus:outline-none focus:border-blue-400 dark:bg-[#090e15] dark:text-white"
       onChange={[Function]}
       value="repository"
     >

From a6229675fc69decd620dac99217fc9b42ef26302 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Sun, 3 Mar 2024 20:43:55 +0100
Subject: [PATCH 3/7] changed button color for better UI/UX

---
 src/components/AccountNotifications.tsx                       | 2 +-
 .../__snapshots__/AccountNotifications.test.tsx.snap          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 5d735ed20..3012d419f 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -46,7 +46,7 @@ export const AccountNotifications = (props: IProps) => {
       )}
 
       <label className="flex items-center text-sm font-light p-2">
-        <span className="text-gray-200 mr-2 font-semibold">Group by:</span>
+        <span className="dark:text-gray-200 mr-2 font-semibold">Group by:</span>
         <select
           value={groupType}
           onChange={(e) =>
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 781c65773..75790ec0e 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
     className="flex items-center text-sm font-light p-2"
   >
     <span
-      className="text-gray-200 mr-2 font-semibold"
+      className="dark:text-gray-200 mr-2 font-semibold"
     >
       Group by:
     </span>
@@ -93,7 +93,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
     className="flex items-center text-sm font-light p-2"
   >
     <span
-      className="text-gray-200 mr-2 font-semibold"
+      className="dark:text-gray-200 mr-2 font-semibold"
     >
       Group by:
     </span>

From 77e1f92c5c156de8fa33c2854c422b9c78901d62 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Mon, 4 Mar 2024 18:01:41 +0100
Subject: [PATCH 4/7] refractor: group by functionality in sidebar

---
 src/components/AccountNotifications.tsx       |  25 +----
 src/components/NotificationRow.test.tsx       |   6 --
 src/components/NotificationRow.tsx            |   5 +-
 src/components/Repository.test.tsx            |  39 ++++++-
 src/components/Repository.tsx                 |   7 +-
 src/components/Sidebar.tsx                    |  41 ++++++-
 .../AccountNotifications.test.tsx.snap        | 102 +++++-------------
 .../__snapshots__/Sidebar.test.tsx.snap       |  62 +++++++++++
 src/context/App.tsx                           |  16 +++
 9 files changed, 180 insertions(+), 123 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 3012d419f..ef29fee74 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
 
 import { Notification } from '../typesGithub';
@@ -13,10 +13,6 @@ interface IProps {
 export const AccountNotifications = (props: IProps) => {
   const { hostname, showAccountHostname, notifications } = props;
 
-  const [groupType, setGroupType] = useState<'repository' | 'date'>(
-    'repository',
-  );
-
   const groupedNotifications = Object.values(
     notifications.reduce(
       (acc: { [key: string]: Notification[] }, notification) => {
@@ -31,10 +27,6 @@ export const AccountNotifications = (props: IProps) => {
 
   const Chevron = notifications.length > 0 ? ChevronDownIcon : ChevronLeftIcon;
 
-  const handleGroupTypeChange = (type: 'repository' | 'date') => {
-    setGroupType(type);
-  };
-
   return (
     <>
       {showAccountHostname && (
@@ -45,20 +37,6 @@ export const AccountNotifications = (props: IProps) => {
         </div>
       )}
 
-      <label className="flex items-center text-sm font-light p-2">
-        <span className="dark:text-gray-200 mr-2 font-semibold">Group by:</span>
-        <select
-          value={groupType}
-          onChange={(e) =>
-            handleGroupTypeChange(e.target.value as 'repository' | 'date')
-          }
-          className="border border-gray-300 font-semibold rounded p-2 focus:outline-none focus:border-blue-400 dark:bg-[#090e15] dark:text-white"
-        >
-          <option value="repository">Repository</option>
-          <option value="date">Date</option>
-        </select>
-      </label>
-
       {Object.values(groupedNotifications).map((repoNotifications) => {
         const repoSlug = repoNotifications[0].repository.full_name;
         return (
@@ -67,7 +45,6 @@ export const AccountNotifications = (props: IProps) => {
             hostname={hostname}
             repoName={repoSlug}
             repoNotifications={repoNotifications}
-            groupType={groupType}
           />
         );
       })}
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index c33906554..9158a62d6 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/src/components/NotificationRow.test.tsx
@@ -24,7 +24,6 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
-      groupType: 'repository',
     };
 
     const tree = TestRenderer.create(<NotificationRow {...props} />);
@@ -37,7 +36,6 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
-      groupType: 'repository',
     };
 
     const { getByRole } = render(
@@ -63,7 +61,6 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
-      groupType: 'repository',
     };
 
     const { getByRole } = render(
@@ -89,7 +86,6 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
-      groupType: 'repository',
     };
 
     const { getByTitle } = render(
@@ -115,7 +111,6 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
-      groupType: 'repository',
     };
 
     const { getByTitle } = render(
@@ -141,7 +136,6 @@ describe('components/Notification.js', () => {
     const props = {
       notification: mockedSingleNotification,
       hostname: 'github.com',
-      groupType: 'repository',
     };
 
     const { getByLabelText } = render(
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 7fcb2b537..5445dd57a 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -14,13 +14,11 @@ import { AppContext } from '../context/App';
 interface IProps {
   hostname: string;
   notification: Notification;
-  groupType: string;
 }
 
 export const NotificationRow: React.FC<IProps> = ({
   notification,
   hostname,
-  groupType,
 }) => {
   const {
     settings,
@@ -29,6 +27,7 @@ export const NotificationRow: React.FC<IProps> = ({
     markNotification,
     markNotificationDone,
     unsubscribeNotification,
+    groupBy,
   } = useContext(AppContext);
 
   const pressTitle = useCallback(() => {
@@ -75,7 +74,7 @@ export const NotificationRow: React.FC<IProps> = ({
         onClick={() => pressTitle()}
         role="main"
       >
-        {groupType === 'date' && (
+        {groupBy?.groupType === 'date' && (
           <div className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden">
             {notification.repository.full_name}
           </div>
diff --git a/src/components/Repository.test.tsx b/src/components/Repository.test.tsx
index f40546b89..218939076 100644
--- a/src/components/Repository.test.tsx
+++ b/src/components/Repository.test.tsx
@@ -20,7 +20,6 @@ describe('components/Repository.tsx', () => {
     hostname: 'github.com',
     repoName: 'manosim/gitify',
     repoNotifications: mockedGithubNotifications,
-    groupType: 'repository',
   };
 
   beforeEach(() => {
@@ -31,7 +30,14 @@ describe('components/Repository.tsx', () => {
 
   it('should render itself & its children', () => {
     const tree = TestRenderer.create(
-      <AppContext.Provider value={{}}>
+      <AppContext.Provider
+        value={{
+          groupBy: {
+            groupType: 'repository',
+            setGroupType: () => 'repository',
+          },
+        }}
+      >
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,
     );
@@ -40,7 +46,14 @@ describe('components/Repository.tsx', () => {
 
   it('should open the browser when clicking on the repo name', () => {
     const { getByText } = render(
-      <AppContext.Provider value={{}}>
+      <AppContext.Provider
+        value={{
+          groupBy: {
+            groupType: 'repository',
+            setGroupType: () => 'repository',
+          },
+        }}
+      >
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,
     );
@@ -55,7 +68,15 @@ describe('components/Repository.tsx', () => {
 
   it('should mark a repo as read', function () {
     const { getByTitle } = render(
-      <AppContext.Provider value={{ markRepoNotifications }}>
+      <AppContext.Provider
+        value={{
+          markRepoNotifications,
+          groupBy: {
+            groupType: 'repository',
+            setGroupType: () => 'repository',
+          },
+        }}
+      >
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,
     );
@@ -70,7 +91,15 @@ describe('components/Repository.tsx', () => {
 
   it('should mark a repo as done', function () {
     const { getByTitle } = render(
-      <AppContext.Provider value={{ markRepoNotificationsDone }}>
+      <AppContext.Provider
+        value={{
+          markRepoNotificationsDone,
+          groupBy: {
+            groupType: 'repository',
+            setGroupType: () => 'repository',
+          },
+        }}
+      >
         <RepositoryNotifications {...props} />
       </AppContext.Provider>,
     );
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 6a95ee481..b260422ec 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -11,16 +11,14 @@ interface IProps {
   hostname: string;
   repoNotifications: Notification[];
   repoName: string;
-  groupType: string;
 }
 
 export const RepositoryNotifications: React.FC<IProps> = ({
   repoName,
   repoNotifications,
   hostname,
-  groupType,
 }) => {
-  const { markRepoNotifications, markRepoNotificationsDone } =
+  const { markRepoNotifications, markRepoNotificationsDone, groupBy } =
     useContext(AppContext);
 
   const openBrowser = useCallback(() => {
@@ -42,7 +40,7 @@ export const RepositoryNotifications: React.FC<IProps> = ({
 
   return (
     <>
-      {groupType === 'repository' && (
+      {groupBy?.groupType === 'repository' && (
         <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white">
           <div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
             <img className="rounded w-5 h-5" src={avatarUrl} />
@@ -78,7 +76,6 @@ export const RepositoryNotifications: React.FC<IProps> = ({
               key={obj.id}
               hostname={hostname}
               notification={obj}
-              groupType={groupType}
             />
           </CSSTransition>
         ))}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 38574a812..0a12e7a57 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
-import { BellIcon } from '@primer/octicons-react';
+import { BellIcon, FilterIcon } from '@primer/octicons-react';
 import { ipcRenderer } from 'electron';
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 import { Logo } from '../components/Logo';
@@ -16,7 +16,9 @@ export const Sidebar: React.FC = () => {
   const location = useLocation();
 
   const { isLoggedIn } = useContext(AppContext);
-  const { notifications, fetchNotifications } = useContext(AppContext);
+  const { notifications, fetchNotifications, groupBy } = useContext(AppContext);
+
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
 
   const onOpenBrowser = useCallback(() => {
     openExternalLink(`https://github.com/${Constants.REPO_SLUG}`);
@@ -59,6 +61,39 @@ export const Sidebar: React.FC = () => {
           <BellIcon size={12} />
           {notificationsCount > 0 && notificationsCount}
         </div>
+
+        <div className="flex items-center">
+          <div
+            className="flex items-center cursor-pointer text-white"
+            onClick={() => setDropdownOpen(!dropdownOpen)}
+          >
+            <FilterIcon size={12} />
+          </div>
+          {dropdownOpen && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center">
+              <div className="absolute top-28 left-0 w-28 border border-gray-300 rounded shadow-md ">
+                <button
+                  onClick={() => {
+                    groupBy.setGroupType('repository');
+                    setDropdownOpen(false);
+                  }}
+                  className="w-full px-4 py-2 bg-[#161b22] text-white dark:hover:bg-gray-darker rounded text-sm"
+                >
+                  Repository
+                </button>
+                <button
+                  onClick={() => {
+                    groupBy.setGroupType('date');
+                    setDropdownOpen(false);
+                  }}
+                  className="w-full px-4 py-2 bg-[#161b22] text-white dark:hover:bg-gray-darker rounded text-sm"
+                >
+                  Date
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
 
       <div className="py-4 px-3">
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 75790ec0e..1e14664e4 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -29,31 +29,6 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
       />
     </svg>
   </div>,
-  <label
-    className="flex items-center text-sm font-light p-2"
-  >
-    <span
-      className="dark:text-gray-200 mr-2 font-semibold"
-    >
-      Group by:
-    </span>
-    <select
-      className="border border-gray-300 font-semibold rounded p-2 focus:outline-none focus:border-blue-400 dark:bg-[#090e15] dark:text-white"
-      onChange={[Function]}
-      value="repository"
-    >
-      <option
-        value="repository"
-      >
-        Repository
-      </option>
-      <option
-        value="date"
-      >
-        Date
-      </option>
-    </select>
-  </label>,
   <div>
     Repository
   </div>,
@@ -61,58 +36,31 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
 `;
 
 exports[`components/AccountNotifications.tsx should render itself (github.com without notifications) 1`] = `
-[
-  <div
-    className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm"
-  >
-    github.com
-    <svg
-      aria-hidden="true"
-      className="octicon octicon-chevron-left"
-      fill="currentColor"
-      focusable="false"
-      height={20}
-      role="img"
-      style={
-        {
-          "display": "inline-block",
-          "overflow": "visible",
-          "userSelect": "none",
-          "verticalAlign": "text-bottom",
-        }
+<div
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm"
+>
+  github.com
+  <svg
+    aria-hidden="true"
+    className="octicon octicon-chevron-left"
+    fill="currentColor"
+    focusable="false"
+    height={20}
+    role="img"
+    style={
+      {
+        "display": "inline-block",
+        "overflow": "visible",
+        "userSelect": "none",
+        "verticalAlign": "text-bottom",
       }
-      viewBox="0 0 16 16"
-      width={20}
-    >
-      <path
-        d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
-      />
-    </svg>
-  </div>,
-  <label
-    className="flex items-center text-sm font-light p-2"
+    }
+    viewBox="0 0 16 16"
+    width={20}
   >
-    <span
-      className="dark:text-gray-200 mr-2 font-semibold"
-    >
-      Group by:
-    </span>
-    <select
-      className="border border-gray-300 font-semibold rounded p-2 focus:outline-none focus:border-blue-400 dark:bg-[#090e15] dark:text-white"
-      onChange={[Function]}
-      value="repository"
-    >
-      <option
-        value="repository"
-      >
-        Repository
-      </option>
-      <option
-        value="date"
-      >
-        Date
-      </option>
-    </select>
-  </label>,
-]
+    <path
+      d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
+    />
+  </svg>
+</div>
 `;
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index e9cf5c2ac..ab6604dd1 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -81,6 +81,37 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
       </svg>
       4
     </div>
+    <div
+      className="flex items-center"
+    >
+      <div
+        className="flex items-center cursor-pointer text-white"
+        onClick={[Function]}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-filter"
+          fill="currentColor"
+          focusable="false"
+          height={12}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        >
+          <path
+            d="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+          />
+        </svg>
+      </div>
+    </div>
   </div>
   <div
     className="py-4 px-3"
@@ -201,6 +232,37 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
       </svg>
       4
     </div>
+    <div
+      className="flex items-center"
+    >
+      <div
+        className="flex items-center cursor-pointer text-white"
+        onClick={[Function]}
+      >
+        <svg
+          aria-hidden="true"
+          className="octicon octicon-filter"
+          fill="currentColor"
+          focusable="false"
+          height={12}
+          role="img"
+          style={
+            {
+              "display": "inline-block",
+              "overflow": "visible",
+              "userSelect": "none",
+              "verticalAlign": "text-bottom",
+            }
+          }
+          viewBox="0 0 16 16"
+          width={12}
+        >
+          <path
+            d="M.75 3h14.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1 0-1.5ZM3 7.75A.75.75 0 0 1 3.75 7h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 7.75Zm3 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"
+          />
+        </svg>
+      </div>
+    </div>
   </div>
   <div
     className="py-4 px-3"
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 2f7b8487e..b30f0be3b 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -61,6 +61,11 @@ interface AppContextState {
 
   settings: SettingsState;
   updateSetting: (name: keyof SettingsState, value: any) => void;
+
+  groupBy: {
+    groupType: 'repository' | 'date';
+    setGroupType: (type: 'repository' | 'date') => void;
+  };
 }
 
 export const AppContext = createContext<Partial<AppContextState>>({});
@@ -81,6 +86,10 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     markRepoNotificationsDone,
   } = useNotifications(settings.colors);
 
+  const [groupType, setGroupType] = useState<'repository' | 'date'>(
+    'repository',
+  );
+
   useEffect(() => {
     restoreSettings();
   }, []);
@@ -207,6 +216,11 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [accounts, notifications],
   );
 
+  const groupByContextValue = useMemo(
+    () => ({ groupType, setGroupType }),
+    [groupType],
+  );
+
   return (
     <AppContext.Provider
       value={{
@@ -230,6 +244,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 
         settings,
         updateSetting,
+
+        groupBy: groupByContextValue,
       }}
     >
       {children}

From 048103cd636c0d2a66fc25c32737dad50ff371f6 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Mon, 11 Mar 2024 23:43:10 +0100
Subject: [PATCH 5/7] feat: exit on outside click

---
 src/components/Sidebar.tsx                         | 7 +++++--
 src/components/__snapshots__/Sidebar.test.tsx.snap | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 0a12e7a57..e896bb2c0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -64,13 +64,16 @@ export const Sidebar: React.FC = () => {
 
         <div className="flex items-center">
           <div
-            className="flex items-center cursor-pointer text-white"
+            className={`flex items-center cursor-pointer text-white ${dropdownOpen ? 'z-20' : ''}`}
             onClick={() => setDropdownOpen(!dropdownOpen)}
           >
             <FilterIcon size={12} />
           </div>
           {dropdownOpen && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
+            <div
+              className="fixed inset-0 z-10 flex items-center justify-center"
+              onClick={() => setDropdownOpen(false)}
+            >
               <div className="absolute top-28 left-0 w-28 border border-gray-300 rounded shadow-md ">
                 <button
                   onClick={() => {
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index ab6604dd1..3ef3d314f 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
       className="flex items-center"
     >
       <div
-        className="flex items-center cursor-pointer text-white"
+        className="flex items-center cursor-pointer text-white "
         onClick={[Function]}
       >
         <svg
@@ -236,7 +236,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
       className="flex items-center"
     >
       <div
-        className="flex items-center cursor-pointer text-white"
+        className="flex items-center cursor-pointer text-white "
         onClick={[Function]}
       >
         <svg

From b2630856fd1f6a88e6de3e6cbe84b8f972065827 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Tue, 12 Mar 2024 21:55:35 +0100
Subject: [PATCH 6/7] snapshot updated

---
 src/components/__snapshots__/Repository.test.tsx.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index a7059bbf8..8222bc734 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`components/Repository.tsx should render itself & its children 1`] = `
 [
   <div
-    className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
+    className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white"
   >
     <div
       className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
@@ -19,7 +19,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       </span>
     </div>
     <div
-      className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+      className="flex justify-center items-center gap-2"
     >
       <button
         className="focus:outline-none h-full hover:text-green-500"

From 5abd0b312c9e42d87fab8877758fb98e9ccc9ca3 Mon Sep 17 00:00:00 2001
From: AltinGruda <altingruda@gmail.com>
Date: Thu, 14 Mar 2024 17:41:01 +0100
Subject: [PATCH 7/7] feat: sort by date and active button indicator

---
 src/components/AccountNotifications.tsx | 33 +++++++++++++++++++++++--
 src/components/Sidebar.tsx              | 14 ++++++++---
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index ef29fee74..f1da715f0 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
 
 import { Notification } from '../typesGithub';
 import { RepositoryNotifications } from './Repository';
+import { AppContext } from '../context/App';
 
 interface IProps {
   hostname: string;
@@ -13,6 +14,18 @@ interface IProps {
 export const AccountNotifications = (props: IProps) => {
   const { hostname, showAccountHostname, notifications } = props;
 
+  const { groupBy } = useContext(AppContext);
+
+  const sortByDate = (notifications: Notification[][]): Notification[][] => {
+    // Create a copy of the notifications array before sorting
+    const sortedNotifications = [...notifications];
+    return sortedNotifications.sort((a, b) => {
+      const dateA = new Date(a[0].updated_at).getTime();
+      const dateB = new Date(b[0].updated_at).getTime();
+      return dateB - dateA;
+    });
+  };
+
   const groupedNotifications = Object.values(
     notifications.reduce(
       (acc: { [key: string]: Notification[] }, notification) => {
@@ -25,6 +38,22 @@ export const AccountNotifications = (props: IProps) => {
     ),
   );
 
+  const [sortedNotifications, setSortedNotifications] =
+    useState<Notification[][]>(groupedNotifications);
+
+  // Function to sort notifications based on the selected grouping type
+  const sortNotifications = () => {
+    const newSortedNotifications =
+      groupBy?.groupType === 'date'
+        ? sortByDate(groupedNotifications)
+        : groupedNotifications;
+    setSortedNotifications(newSortedNotifications);
+  };
+
+  useEffect(() => {
+    sortNotifications();
+  }, [groupBy?.groupType]); // Run the effect when groupBy.groupType changes
+
   const Chevron = notifications.length > 0 ? ChevronDownIcon : ChevronLeftIcon;
 
   return (
@@ -37,7 +66,7 @@ export const AccountNotifications = (props: IProps) => {
         </div>
       )}
 
-      {Object.values(groupedNotifications).map((repoNotifications) => {
+      {sortedNotifications.map((repoNotifications) => {
         const repoSlug = repoNotifications[0].repository.full_name;
         return (
           <RepositoryNotifications
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index e896bb2c0..5e868a3bd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { BellIcon, FilterIcon } from '@primer/octicons-react';
+import { BellIcon, CheckIcon, FilterIcon } from '@primer/octicons-react';
 import { ipcRenderer } from 'electron';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -74,14 +74,17 @@ export const Sidebar: React.FC = () => {
               className="fixed inset-0 z-10 flex items-center justify-center"
               onClick={() => setDropdownOpen(false)}
             >
-              <div className="absolute top-28 left-0 w-28 border border-gray-300 rounded shadow-md ">
+              <div className="absolute top-28 left-0 w-28 border border-gray-300 rounded shadow-md bg-[#161b22]">
                 <button
                   onClick={() => {
                     groupBy.setGroupType('repository');
                     setDropdownOpen(false);
                   }}
-                  className="w-full px-4 py-2 bg-[#161b22] text-white dark:hover:bg-gray-darker rounded text-sm"
+                  className="w-full px-2 py-2 bg-[#161b22] text-white dark:hover:bg-gray-darker rounded text-sm flex justify-center items-center"
                 >
+                  {groupBy?.groupType === 'repository' && (
+                    <CheckIcon className="text-white w-4 mr-2" />
+                  )}
                   Repository
                 </button>
                 <button
@@ -89,8 +92,11 @@ export const Sidebar: React.FC = () => {
                     groupBy.setGroupType('date');
                     setDropdownOpen(false);
                   }}
-                  className="w-full px-4 py-2 bg-[#161b22] text-white dark:hover:bg-gray-darker rounded text-sm"
+                  className="w-full px-2 py-2 bg-[#161b22] text-white dark:hover:bg-gray-darker rounded text-sm flex justify-center items-center"
                 >
+                  {groupBy?.groupType === 'date' && (
+                    <CheckIcon className="text-white w-4 mr-2" />
+                  )}
                   Date
                 </button>
               </div>