feat: format notification titles with backticks as code

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;
@@ -118,9 +119,10 @@ export const NotificationRow: FC<NotificationRowProps> = ({
             justify="space-between"
             title={notification.display.title}
           >
-            <Text className={!settings.wrapNotificationTitle && 'truncate'}>
-              {notification.subject.title}
-            </Text>
+            <NotificationTitle
+              className={!settings.wrapNotificationTitle && 'truncate'}
+              title={notification.subject.title}
+            />
             <Text
               className={cn(
                 'text-xxs ml-auto mr-2',

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

@@ -0,0 +1,56 @@
+import { renderWithAppContext } from '../../__helpers__/test-utils';
+
+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 custom className', () => {
+    const tree = renderWithAppContext(
+      <NotificationTitle
+        className="truncate"
+        title="refactor: migrate deprecated atlaskit `xcss`"
+      />,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/renderer/components/notifications/NotificationTitle.tsx

@@ -0,0 +1,36 @@
+import type { FC } from 'react';
+
+import { Text } from '@primer/react';
+
+import { parseInlineCode } from '../../utils/helpers';
+
+interface NotificationTitleProps {
+  title: string;
+  className?: string;
+}
+
+export const NotificationTitle: FC<NotificationTitleProps> = ({
+  title,
+  className,
+}: NotificationTitleProps) => {
+  const parts = parseInlineCode(title);
+
+  return (
+    <Text className={className}>
+      {parts.map((part, index) =>
+        part.type === 'code' ? (
+          <code
+            className="px-1 py-0.5 rounded bg-gitify-notification-hover font-mono text-xs"
+            // biome-ignore lint/suspicious/noArrayIndexKey: parts are derived from static title
+            key={index}
+          >
+            {part.content}
+          </code>
+        ) : (
+          // biome-ignore lint/suspicious/noArrayIndexKey: parts are derived from static title
+          <span key={index}>{part.content}</span>
+        ),
+      )}
+    </Text>
+  );
+};