Merge remote-tracking branch 'origin/main' into patch/menubar-windows

gitify-app · Jun 16, 2024 · 1b41206 · 1b41206
2 parents 4166c63 + caff503
commit 1b41206
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 91 deletions.
diff --git a/index.html b/index.html
@@ -25,6 +25,38 @@
       -webkit-user-select: none;
     }
 
+    html::-webkit-scrollbar,
+    div.flex-grow::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    html::-webkit-scrollbar-thumb,
+    div.flex-grow::-webkit-scrollbar-thumb {
+        background-color: #c1c1c1;
+        border-radius: 10px;
+    }
+
+    html::-webkit-scrollbar-thumb:hover,
+    div.flex-grow::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+        border-radius: 10px;
+    }
+
+    html.dark::-webkit-scrollbar-track,
+    html.dark div.flex-grow::-webkit-scrollbar-track {
+        background-color: #090E15;
+    }
+
+    html.dark::-webkit-scrollbar-thumb,
+    html.dark div.flex-grow::-webkit-scrollbar-thumb {
+        background-color: #24292e;
+    }
+
+    html.dark::-webkit-scrollbar-thumb:hover,
+    html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
+        background-color: #3a3f44;
+    }
+
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",

diff --git a/package.json b/package.json
@@ -154,7 +154,7 @@
   },
   "packageManager": "[email protected]",
   "lint-staged": {
-    "*.{html,js,json,ts,tsx}": "biome format --fix"
+    "*.{js,json,ts,tsx}": "biome format --fix"
   },
   "pnpm": {
     "patchedDependencies": {

diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
@@ -350,6 +350,35 @@ describe('components/NotificationRow.tsx', () => {
       expect(removeNotificationFromState).toHaveBeenCalledTimes(1);
     });
 
+    it('should open a notification in the browser - delay notification setting enabled', () => {
+      const removeNotificationFromState = jest.fn();
+
+      const props = {
+        notification: mockSingleNotification,
+        account: mockGitHubCloudAccount,
+      };
+
+      render(
+        <AppContext.Provider
+          value={{
+            settings: {
+              ...mockSettings,
+              markAsDoneOnOpen: false,
+              delayNotificationState: true,
+            },
+            removeNotificationFromState,
+            auth: mockAuth,
+          }}
+        >
+          <NotificationRow {...props} />
+        </AppContext.Provider>,
+      );
+
+      fireEvent.click(screen.getByRole('main'));
+      expect(links.openNotification).toHaveBeenCalledTimes(1);
+      expect(removeNotificationFromState).toHaveBeenCalledTimes(1);
+    });
+
     it('should open a notification in the browser - key down', () => {
       const removeNotificationFromState = jest.fn();
 

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
@@ -45,9 +45,12 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
     unsubscribeNotification,
   } = useContext(AppContext);
   const [animateExit, setAnimateExit] = useState(false);
+  const [showAsRead, setShowAsRead] = useState(false);
 
   const handleNotification = useCallback(() => {
-    setAnimateExit(true);
+    setAnimateExit(!settings.delayNotificationState);
+    setShowAsRead(settings.delayNotificationState);
+
     openNotification(notification);
 
     if (settings.markAsDoneOnOpen) {
@@ -102,13 +105,14 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
         'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
         animateExit &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
+        showAsRead && 'opacity-50 dark:opacity-50',
       )}
     >
       <div
         className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
         title={notificationTitle}
       >
-        <NotificationIcon size={18} aria-label={notification.subject.type} />
+        <NotificationIcon size={16} aria-label={notification.subject.type} />
       </div>
 
       <div
@@ -154,7 +158,7 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           <div title={reason.description}>{reason.title}</div>
           <div title={updatedLabel}>{updatedAt}</div>
           {settings.showPills && (
-            <div>
+            <div className="flex">
               {notification.subject?.linkedIssues?.length > 0 && (
                 <PillButton
                   title={linkedIssuesPillDescription}
@@ -218,7 +222,8 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           onClick={() => {
-            setAnimateExit(true);
+            setAnimateExit(!settings.delayNotificationState);
+            setShowAsRead(settings.delayNotificationState);
             markNotificationDone(notification);
           }}
         >
@@ -239,7 +244,8 @@ export const NotificationRow: FC<IProps> = ({ notification }) => {
           className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           onClick={() => {
-            setAnimateExit(true);
+            setAnimateExit(!settings.delayNotificationState);
+            setShowAsRead(settings.delayNotificationState);
             markNotificationRead(notification);
           }}
         >