feat: add hover title text to icons

src/components/NotificationRow.tsx

@@ -7,7 +7,7 @@ import {
   getNotificationTypeIcon,
   getNotificationTypeIconColor,
 } from '../utils/github-api';
-import { openInBrowser } from '../utils/helpers';
+import { formatForDisplay, openInBrowser } from '../utils/helpers';
 import { Notification } from '../typesGithub';
 import { AppContext } from '../context/App';
 
@@ -61,10 +61,17 @@ export const NotificationRow: React.FC<IProps> = ({
   const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), {
     addSuffix: true,
   });
+  const notificationTitle = formatForDisplay([
+    notification.subject.state,
+    notification.subject.type,
+  ]);
 
   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">
-      <div className={`flex justify-center items-center w-5 ${realIconColor}`}>
+      <div
+        className={`flex justify-center items-center w-5 ${realIconColor}`}
+        title={notificationTitle}
+      >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
 

src/components/__snapshots__/NotificationRow.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`components/Notification.js should render itself & its children 1`] = `
 >
   <div
     className="flex justify-center items-center w-5 text-green-500"
+    title="Open Issue"
   >
     <svg
       aria-hidden="false"

src/utils/helpers.test.ts

@@ -7,6 +7,7 @@ import {
   addNotificationReferrerIdToUrl,
   getHtmlUrl,
   generateGitHubWebUrl,
+  formatForDisplay,
 } from './helpers';
 import {
   mockedGraphQLResponse,
@@ -558,5 +559,19 @@ describe('utils/helpers.ts', () => {
         `${mockedSingleNotification.repository.html_url}?${mockedNotificationReferrer}`,
       );
     });
+
+    it('formatForDisplay', () => {
+      expect(formatForDisplay(null)).toBe('');
+      expect(formatForDisplay([])).toBe('');
+      expect(formatForDisplay(['open', 'PullRequest'])).toBe(
+        'Open Pull Request',
+      );
+      expect(formatForDisplay(['OUTDATED', 'Discussion'])).toBe(
+        'Outdated Discussion',
+      );
+      expect(formatForDisplay(['not_planned', 'Issue'])).toBe(
+        'Not Planned Issue',
+      );
+    });
   });
 });

src/utils/helpers.ts

@@ -225,6 +225,21 @@ export async function generateGitHubWebUrl(
   return url;
 }
 
+export function formatForDisplay(text: string[]) {
+  if (!text) {
+    return '';
+  }
+
+  return text
+    .join(' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2') // Add space between lowercase character followed by an uppercase character
+    .replace(/_/g, ' ') // Replace underscores with spaces
+    .replace(/\w+/g, (word) => {
+      // Convert to proper case (capitalize first letter of each word)
+      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+    });
+}
+
 export async function openInBrowser(
   notification: Notification,
   accounts: AuthState,