feat: format notification titles with backticks as code (#2548)

* feat: format notification titles with backticks as code

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* feat(notifications): format backticks in title

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* feat(notifications): format backticks in title

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* feat(notifications): format backticks in title

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* feat(notifications): format backticks in title

Signed-off-by: Adam Setch <adam.setch@outlook.com>

* feat(notifications): format backticks in title

Signed-off-by: Adam Setch <adam.setch@outlook.com>

---------

Signed-off-by: Adam Setch <adam.setch@outlook.com>

Author: setchy

src/renderer/components/notifications/NotificationRow.tsx

@@ -17,6 +17,7 @@ import { isGroupByDate } from '../../utils/notifications/group';
 import { shouldRemoveNotificationsFromState } from '../../utils/notifications/remove';
 import { NotificationFooter } from './NotificationFooter';
 import { NotificationHeader } from './NotificationHeader';
+import { NotificationTitle } from './NotificationTitle';
 
 interface NotificationRowProps {
   notification: GitifyNotification;
@@ -97,10 +98,7 @@ export const NotificationRow: FC<NotificationRowProps> = ({
         </Tooltip>
 
         <Stack
-          className={cn(
-            'cursor-pointer text-sm w-full',
-            !settings.wrapNotificationTitle && 'truncate',
-          )}
+          className="cursor-pointer text-sm w-full"
           direction="vertical"
           gap="none"
           onClick={() => handleNotification()}
@@ -109,19 +107,14 @@ export const NotificationRow: FC<NotificationRowProps> = ({
 
           <Stack
             align="start"
-            className={cn(
-              'mb-0.5',
-              !settings.wrapNotificationTitle && 'truncate',
-            )}
+            className="mb-0.5"
             data-testid="notification-row"
             direction="horizontal"
             gap="condensed"
             justify="space-between"
             title={notification.display.title}
           >
-            <Text className={!settings.wrapNotificationTitle && 'truncate'}>
-              {notification.subject.title}
-            </Text>
+            <NotificationTitle title={notification.subject.title} />
             <Text
               className={cn(
                 'text-xxs ml-auto mr-2',

src/renderer/components/notifications/NotificationTitle.test.tsx

@@ -0,0 +1,74 @@
+import { renderWithAppContext } from '../../__helpers__/test-utils';
+import { mockSettings } from '../../__mocks__/state-mocks';
+
+import { NotificationTitle } from './NotificationTitle';
+
+describe('renderer/components/notifications/NotificationTitle.tsx', () => {
+  it('should render plain text without code blocks', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="Simple notification title" />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render text with single inline code block', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="refactor: migrate deprecated atlaskit `xcss`" />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render text with multiple inline code blocks', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="Replace `foo` with `bar` in config" />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render text with code block at the start', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="`useState` hook implementation" />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render text with code block at the end', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="Fix issue with `render`" />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should apply truncate className when wrapNotificationTitle is false', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="refactor: migrate deprecated atlaskit `xcss`" />,
+      {
+        settings: {
+          ...mockSettings,
+          wrapNotificationTitle: false,
+        },
+      },
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should not apply truncate className when wrapNotificationTitle is true', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle title="refactor: migrate deprecated atlaskit `xcss`" />,
+      {
+        settings: {
+          ...mockSettings,
+          wrapNotificationTitle: true,
+        },
+      },
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/notifications/NotificationTitle.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+
+import { Text } from '@primer/react';
+
+import { useAppContext } from '../../hooks/useAppContext';
+
+import { cn } from '../../utils/cn';
+import { parseInlineCode } from '../../utils/helpers';
+
+interface NotificationTitleProps {
+  title: string;
+}
+
+export const NotificationTitle: FC<NotificationTitleProps> = ({
+  title,
+}: NotificationTitleProps) => {
+  const { settings } = useAppContext();
+  const parts = parseInlineCode(title);
+
+  return (
+    <Text className={!settings.wrapNotificationTitle && 'truncate'}>
+      {parts.map((part) => (
+        <Text
+          className={cn(
+            part.type === 'code' &&
+              'px-1 py-0.5 rounded bg-gitify-notification-hover font-mono text-xs',
+          )}
+          key={part.id}
+        >
+          {part.content}
+        </Text>
+      ))}
+    </Text>
+  );
+};