From aa12ecd509b22de046042b4231c6e134b37a9a61 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sun, 26 Jan 2025 07:34:36 -0500
Subject: [PATCH] feat: user setting to wrap notification titles

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/__mocks__/state-mocks.ts         | 13 ++++--
 .../notifications/NotificationRow.tsx         | 12 +++--
 .../AccountNotifications.test.tsx.snap        | 24 +++++-----
 .../NotificationRow.test.tsx.snap             | 36 +++++++--------
 .../settings/AppearanceSettings.test.tsx      | 25 +++++++++++
 .../settings/AppearanceSettings.tsx           | 14 ++++++
 src/renderer/context/App.tsx                  | 13 ++++--
 .../__snapshots__/Settings.test.tsx.snap      | 45 +++++++++++++++++++
 src/renderer/types.ts                         |  9 ++--
 9 files changed, 146 insertions(+), 45 deletions(-)

diff --git a/src/renderer/__mocks__/state-mocks.ts b/src/renderer/__mocks__/state-mocks.ts
index a4e7cf584..640110c6e 100644
--- a/src/renderer/__mocks__/state-mocks.ts
+++ b/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: [],
 };
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 31dd24b1f..0fcfcd6b2 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/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
diff --git a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
index bbce270de..9a3e93fe2 100644
--- a/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/AccountNotifications.test.tsx.snap
@@ -833,7 +833,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -891,7 +891,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               </div>
             </div>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -902,7 +902,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               title="I am a robot and this is a test!"
             >
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                class="Text-sc-17v1xeu-0 hmAFGJ truncate"
               >
                 I am a robot and this is a test!
               </span>
@@ -1214,7 +1214,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -1272,7 +1272,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               </div>
             </div>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -1283,7 +1283,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
               title="Improve the UI"
             >
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                class="Text-sc-17v1xeu-0 hmAFGJ truncate"
               >
                 Improve the UI
               </span>
@@ -1732,7 +1732,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -1790,7 +1790,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1801,7 +1801,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             title="I am a robot and this is a test!"
           >
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              class="Text-sc-17v1xeu-0 hmAFGJ truncate"
             >
               I am a robot and this is a test!
             </span>
@@ -2113,7 +2113,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -2171,7 +2171,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -2182,7 +2182,7 @@ exports[`renderer/components/notifications/AccountNotifications.tsx should rende
             title="Improve the UI"
           >
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              class="Text-sc-17v1xeu-0 hmAFGJ truncate"
             >
               Improve the UI
             </span>
diff --git a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
index 33eb3a69f..1be49f0f4 100644
--- a/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/notifications/__snapshots__/NotificationRow.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -103,7 +103,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               </div>
             </div>
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -114,7 +114,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="I am a robot and this is a test!"
             >
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                class="Text-sc-17v1xeu-0 hmAFGJ truncate"
               >
                 I am a robot and this is a test!
               </span>
@@ -429,7 +429,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -487,7 +487,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -498,7 +498,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             title="I am a robot and this is a test!"
           >
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              class="Text-sc-17v1xeu-0 hmAFGJ truncate"
             >
               I am a robot and this is a test!
             </span>
@@ -870,7 +870,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -879,7 +879,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -890,7 +890,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="I am a robot and this is a test!"
             >
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                class="Text-sc-17v1xeu-0 hmAFGJ truncate"
               >
                 I am a robot and this is a test!
               </span>
@@ -1205,7 +1205,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -1214,7 +1214,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1225,7 +1225,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             title="I am a robot and this is a test!"
           >
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              class="Text-sc-17v1xeu-0 hmAFGJ truncate"
             >
               I am a robot and this is a test!
             </span>
@@ -1597,7 +1597,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             </svg>
           </span>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
             data-align="stretch"
             data-direction="vertical"
             data-gap="none"
@@ -1606,7 +1606,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             data-wrap="nowrap"
           >
             <div
-              class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
               data-align="start"
               data-direction="horizontal"
               data-gap="condensed"
@@ -1617,7 +1617,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
               title="I am a robot and this is a test!"
             >
               <span
-                class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+                class="Text-sc-17v1xeu-0 hmAFGJ truncate"
               >
                 I am a robot and this is a test!
               </span>
@@ -1932,7 +1932,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           </svg>
         </span>
         <div
-          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer truncate w-full"
+          class="Stack__StyledStack-sc-x3xa2i-0 duhwY cursor-pointer text-sm w-full truncate"
           data-align="stretch"
           data-direction="vertical"
           data-gap="none"
@@ -1941,7 +1941,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
           data-wrap="nowrap"
         >
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm mb-0.5 truncate"
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY mb-0.5 truncate"
             data-align="start"
             data-direction="horizontal"
             data-gap="condensed"
@@ -1952,7 +1952,7 @@ exports[`renderer/components/notifications/NotificationRow.tsx should render its
             title="I am a robot and this is a test!"
           >
             <span
-              class="Text-sc-17v1xeu-0 hmAFGJ block truncate flex-shrink overflow-ellipsis"
+              class="Text-sc-17v1xeu-0 hmAFGJ truncate"
             >
               I am a robot and this is a test!
             </span>
diff --git a/src/renderer/components/settings/AppearanceSettings.test.tsx b/src/renderer/components/settings/AppearanceSettings.test.tsx
index 6ad51e4e7..19447762b 100644
--- a/src/renderer/components/settings/AppearanceSettings.test.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.test.tsx
@@ -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);
+  });
 });
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 17ec47bbe..a2cfb3210 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -290,6 +290,20 @@ export const AppearanceSettings: FC = () => {
             updateSetting('showAccountHeader', evt.target.checked)
           }
         />
+
+        <Checkbox
+          name="wrapNotificationTitle"
+          label="Show full notification title"
+          checked={settings.wrapNotificationTitle}
+          onChange={(evt) =>
+            updateSetting('wrapNotificationTitle', evt.target.checked)
+          }
+          tooltip={
+            <Text>
+              Wrap long notification titles instead of truncating them.
+            </Text>
+          }
+        />
       </Stack>
     </fieldset>
   );
diff --git a/src/renderer/context/App.tsx b/src/renderer/context/App.tsx
index a9764ead3..bc477aba5 100644
--- a/src/renderer/context/App.tsx
+++ b/src/renderer/context/App.tsx
@@ -16,13 +16,17 @@ import { useNotifications } from '../hooks/useNotifications';
 import {
   type Account,
   type AccountNotifications,
+  type AppearanceSettingsState,
   type AuthState,
+  type FilterSettingsState,
   type GitifyError,
   GroupBy,
+  type NotificationSettingsState,
   OpenPreference,
   type SettingsState,
   type SettingsValue,
   type Status,
+  type SystemSettingsState,
   Theme,
 } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -65,16 +69,17 @@ export const defaultAuth: AuthState = {
   user: null,
 };
 
-const defaultAppearanceSettings = {
+const defaultAppearanceSettings: AppearanceSettingsState = {
   theme: Theme.SYSTEM,
   zoomPercentage: 100,
   detailedNotifications: true,
   showPills: true,
   showNumber: true,
   showAccountHeader: false,
+  wrapNotificationTitle: false,
 };
 
-const defaultNotificationSettings = {
+const defaultNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchAllNotifications: true,
   participating: false,
@@ -83,7 +88,7 @@ const defaultNotificationSettings = {
   delayNotificationState: false,
 };
 
-const defaultSystemSettings = {
+const defaultSystemSettings: SystemSettingsState = {
   openLinks: OpenPreference.FOREGROUND,
   keyboardShortcut: true,
   showNotificationsCountInTray: true,
@@ -93,7 +98,7 @@ const defaultSystemSettings = {
   openAtStartup: false,
 };
 
-export const defaultFilters = {
+export const defaultFilters: FilterSettingsState = {
   hideBots: false,
   filterReasons: [],
 };
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 843d8055d..e47d7138d 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -542,6 +542,51 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               Show account header
             </label>
           </div>
+          <div
+            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+            data-align="center"
+            data-direction="horizontal"
+            data-gap="condensed"
+            data-justify="start"
+            data-padding="none"
+            data-wrap="nowrap"
+          >
+            <input
+              class="size-4 rounded-sm cursor-pointer"
+              data-testid="checkbox-wrapNotificationTitle"
+              id="wrapNotificationTitle"
+              type="checkbox"
+            />
+            <label
+              class="font-medium text-gitify-font cursor-pointer"
+              for="wrapNotificationTitle"
+            >
+              Show full notification title
+            </label>
+            <div
+              aria-label="tooltip-wrapNotificationTitle"
+              class="Box-sc-g0xbh4-0 relative"
+              data-testid="tooltip-tooltip-wrapNotificationTitle"
+              id="tooltip-wrapNotificationTitle"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
       </fieldset>
       <fieldset>
diff --git a/src/renderer/types.ts b/src/renderer/types.ts
index b0ee83ec4..bdcf7ef78 100644
--- a/src/renderer/types.ts
+++ b/src/renderer/types.ts
@@ -66,16 +66,17 @@ export type SettingsState = AppearanceSettingsState &
   SystemSettingsState &
   FilterSettingsState;
 
-interface AppearanceSettingsState {
+export interface AppearanceSettingsState {
   theme: Theme;
   zoomPercentage: number;
   detailedNotifications: boolean;
   showAccountHeader: boolean;
   showPills: boolean;
   showNumber: boolean;
+  wrapNotificationTitle: boolean;
 }
 
-interface NotificationSettingsState {
+export interface NotificationSettingsState {
   groupBy: GroupBy;
   fetchAllNotifications: boolean;
   participating: boolean;
@@ -84,7 +85,7 @@ interface NotificationSettingsState {
   delayNotificationState: boolean;
 }
 
-interface SystemSettingsState {
+export interface SystemSettingsState {
   openLinks: OpenPreference;
   keyboardShortcut: boolean;
   showNotificationsCountInTray: boolean;
@@ -94,7 +95,7 @@ interface SystemSettingsState {
   openAtStartup: boolean;
 }
 
-interface FilterSettingsState {
+export interface FilterSettingsState {
   hideBots: boolean;
   filterReasons: Reason[];
 }