feat: user setting to wrap notification titles (#1779)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/__mocks__/state-mocks.ts

@@ -1,13 +1,17 @@
 import {
   type Account,
+  type AppearanceSettingsState,
   type AuthState,
+  type FilterSettingsState,
   type GitifyState,
   type GitifyUser,
   GroupBy,
   type Hostname,
   type Link,
+  type NotificationSettingsState,
   OpenPreference,
   type SettingsState,
+  type SystemSettingsState,
   Theme,
   type Token,
 } from '../types';
@@ -80,16 +84,17 @@ export const mockAuth: AuthState = {
 
 export const mockToken = 'token-123-456' as Token;
 
-const mockAppearanceSettings = {
+const mockAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
   zoomPercentage: 100,
   detailedNotifications: true,
   showPills: true,
   showNumber: true,
   showAccountHeader: false,
+  wrapNotificationTitle: false,
 };
 
-const mockNotificationSettings = {
+const mockNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchAllNotifications: true,
   participating: false,
@@ -98,7 +103,7 @@ const mockNotificationSettings = {
   delayNotificationState: false,
 };
 
-const mockSystemSettings = {
+const mockSystemSettings: SystemSettingsState = {
   openLinks: OpenPreference.FOREGROUND,
   keyboardShortcut: true,
   showNotificationsCountInTray: true,
@@ -108,7 +113,7 @@ const mockSystemSettings = {
   openAtStartup: false,
 };
 
-const mockFilters = {
+const mockFilters: FilterSettingsState = {
   hideBots: false,
   filterReasons: [],
 };

src/renderer/components/notifications/NotificationRow.tsx

@@ -115,7 +115,10 @@ export const NotificationRow: FC<INotificationRow> = ({
         <Stack
           direction="vertical"
           gap="none"
-          className="cursor-pointer truncate w-full"
+          className={cn(
+            'cursor-pointer text-sm w-full',
+            !settings.wrapNotificationTitle && 'truncate',
+          )}
           onClick={() => handleNotification()}
         >
           <NotificationHeader notification={notification} />
@@ -126,10 +129,13 @@ export const NotificationRow: FC<INotificationRow> = ({
             justify="space-between"
             gap="condensed"
             title={notificationTitle}
-            className="text-sm mb-0.5 truncate"
+            className={cn(
+              'mb-0.5',
+              !settings.wrapNotificationTitle && 'truncate',
+            )}
             data-testid="notification-row"
           >
-            <Text className="block truncate flex-shrink overflow-ellipsis">
+            <Text className={!settings.wrapNotificationTitle && 'truncate'}>
               {notification.subject.title}
             </Text>
             <Text

src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap

@@ -216,4 +216,29 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('showAccountHeader', true);
   });
+
+  it('should toggle wrap notification title checkbox', async () => {
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: {
+              accounts: [mockGitHubAppAccount],
+            },
+            settings: mockSettings,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <AppearanceSettings />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByTestId('checkbox-wrapNotificationTitle'));
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('wrapNotificationTitle', true);
+  });
 });