refactor: generalize color setting and skip detailed subject fetching when disabled (#1005)

Author: setchy

src/__mocks__/mock-state.ts

@@ -15,7 +15,7 @@ export const mockSettings: SettingsState = {
   showNotificationsCountInTray: false,
   openAtStartup: false,
   theme: Theme.SYSTEM,
-  colors: false,
+  detailedNotifications: false,
   markAsDoneOnOpen: false,
   showAccountHostname: false,
 };

src/components/NotificationRow.tsx

@@ -73,9 +73,6 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   const reason = formatReason(notification.reason);
   const NotificationIcon = getNotificationTypeIcon(notification.subject);
   const iconColor = getNotificationTypeIconColor(notification.subject);
-  const realIconColor = settings
-    ? (settings.colors && iconColor) || ''
-    : iconColor;
   const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), {
     addSuffix: true,
   });
@@ -91,7 +88,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   return (
     <div className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group">
       <div
-        className={`flex justify-center items-center w-5 ${realIconColor}`}
+        className={`flex justify-center items-center w-5 ${iconColor}`}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />

src/context/App.test.tsx

@@ -318,7 +318,7 @@ describe('context/App.tsx', () => {
         showNotificationsCountInTray: false,
         openAtStartup: false,
         theme: 'SYSTEM',
-        colors: null,
+        detailedNotifications: false,
         markAsDoneOnOpen: false,
         showAccountHostname: false,
       },
@@ -362,7 +362,7 @@ describe('context/App.tsx', () => {
         showNotificationsCountInTray: false,
         openAtStartup: true,
         theme: 'SYSTEM',
-        colors: null,
+        detailedNotifications: false,
         markAsDoneOnOpen: false,
         showAccountHostname: false,
       },

src/context/App.tsx

@@ -41,7 +41,7 @@ export const defaultSettings: SettingsState = {
   showNotificationsCountInTray: false,
   openAtStartup: false,
   theme: Theme.SYSTEM,
-  colors: null,
+  detailedNotifications: false,
   markAsDoneOnOpen: false,
   showAccountHostname: false,
 };
@@ -90,7 +90,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     unsubscribeNotification,
     markRepoNotifications,
     markRepoNotificationsDone,
-  } = useNotifications(settings.colors);
+  } = useNotifications();
 
   useEffect(() => {
     restoreSettings();
@@ -103,7 +103,11 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for a subset of settings changes.
   useEffect(() => {
     fetchNotifications(accounts, settings);
-  }, [settings.participating, settings.showBots]);
+  }, [
+    settings.participating,
+    settings.showBots,
+    settings.detailedNotifications,
+  ]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for certain account changes.
   useEffect(() => {