refactor: notification row layout

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

Author: setchy

src/renderer/components/notifications/NotificationFooter.tsx

@@ -29,7 +29,7 @@ export const NotificationFooter: FC<INotificationFooter> = ({
     >
       {notification.subject.user ? (
         <Box
-          title={`View profile: ${notification.subject.user.login}`}
+          title={notification.subject.user.login}
           onClick={(event: MouseEvent<HTMLElement>) => {
             // Don't trigger onClick of parent element.
             event.stopPropagation();

src/renderer/components/notifications/NotificationRow.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react';
 
 import { BellSlashIcon, CheckIcon, ReadIcon } from '@primer/octicons-react';
-import { IconButton, Tooltip } from '@primer/react';
+import { Box, IconButton, Stack, Text, Tooltip } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { GroupBy, Opacity, Size } from '../../types';
@@ -87,87 +87,102 @@ export const NotificationRow: FC<INotificationRow> = ({
   const groupByDate = settings.groupBy === GroupBy.DATE;
 
   return (
-    <div
+    <Box
       id={notification.id}
       className={cn(
-        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
+        'group border-b',
+        'pl-3 pr-1 py-1.5',
+        'text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
         (isRead || showAsRead) && Opacity.READ,
       )}
     >
-      <div className="mr-3 flex items-center justify-center">
+      <Stack
+        direction="horizontal"
+        align="center"
+        gap="condensed"
+        className="relative"
+      >
         <Tooltip text={notificationType} direction="e">
           <NotificationIcon size={Size.LARGE} className={iconColor} />
         </Tooltip>
-      </div>
-
-      <div
-        className="flex-1 truncate cursor-pointer"
-        onClick={() => handleNotification()}
-      >
-        <NotificationHeader notification={notification} />
 
-        <div
-          className="flex gap-1 items-center mb-1 truncate text-sm"
-          title={notificationTitle}
-          data-testid="notification-row"
+        <Stack
+          direction="vertical"
+          gap="none"
+          className="cursor-pointer truncate w-full mr-1"
+          onClick={() => handleNotification()}
         >
-          <span className="truncate">{notification.subject.title}</span>
-          <span
-            className={cn(
-              'text-xxs',
-              Opacity.READ,
-              (groupByDate || !settings.showNumber) && 'hidden',
-            )}
+          <NotificationHeader notification={notification} />
+
+          <Stack
+            direction="horizontal"
+            align="start"
+            justify="space-between"
+            gap="condensed"
+            title={notificationTitle}
+            className="text-sm mb-1 truncate"
+            data-testid="notification-row"
           >
-            {notificationNumber}
-          </span>
-        </div>
-
-        <NotificationFooter notification={notification} />
-      </div>
+            <Text className="block truncate flex-shrink overflow-ellipsis">
+              {notification.subject.title}
+            </Text>
+            <Text
+              className={cn(
+                'text-xxs ml-auto',
+                Opacity.READ,
+                (groupByDate || !settings.showNumber) && 'hidden',
+              )}
+            >
+              {notificationNumber}
+            </Text>
+          </Stack>
+
+          <NotificationFooter notification={notification} />
+        </Stack>
+
+        {!animateExit && (
+          <HoverGroup>
+            {isMarkAsDoneFeatureSupported(notification.account) && (
+              <IconButton
+                aria-label="Mark as done"
+                icon={CheckIcon}
+                size="small"
+                variant="invisible"
+                onClick={() => {
+                  setAnimateExit(!settings.delayNotificationState);
+                  setShowAsRead(settings.delayNotificationState);
+                  markNotificationsAsDone([notification]);
+                }}
+                data-testid="notification-mark-as-done"
+              />
+            )}
 
-      {!animateExit && (
-        <HoverGroup>
-          {isMarkAsDoneFeatureSupported(notification.account) && (
             <IconButton
-              aria-label="Mark as done"
-              icon={CheckIcon}
+              aria-label="Mark as read"
+              icon={ReadIcon}
               size="small"
               variant="invisible"
               onClick={() => {
                 setAnimateExit(!settings.delayNotificationState);
                 setShowAsRead(settings.delayNotificationState);
-                markNotificationsAsDone([notification]);
+                markNotificationsAsRead([notification]);
               }}
-              data-testid="notification-mark-as-done"
+              data-testid="notification-mark-as-read"
             />
-          )}
-
-          <IconButton
-            aria-label="Mark as read"
-            icon={ReadIcon}
-            size="small"
-            variant="invisible"
-            onClick={() => {
-              setAnimateExit(!settings.delayNotificationState);
-              setShowAsRead(settings.delayNotificationState);
-              markNotificationsAsRead([notification]);
-            }}
-            data-testid="notification-mark-as-read"
-          />
-
-          <IconButton
-            aria-label="Unsubscribe from thread"
-            icon={BellSlashIcon}
-            size="small"
-            variant="invisible"
-            onClick={unsubscribeFromThread}
-            data-testid="notification-unsubscribe-from-thread"
-          />
-        </HoverGroup>
-      )}
-    </div>
+
+            <IconButton
+              aria-label="Unsubscribe from thread"
+              icon={BellSlashIcon}
+              size="small"
+              variant="invisible"
+              onClick={unsubscribeFromThread}
+              data-testid="notification-unsubscribe-from-thread"
+            />
+          </HoverGroup>
+        )}
+      </Stack>
+    </Box>
   );
 };