From e98a21199be27615b8cd128f9401acacfc960e1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 19 Oct 2025 21:34:37 +0200
Subject: [PATCH] pl-fe: reduce nesting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../notifications/components/notification.tsx | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index 8f386c65d..7bcf23b8f 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -443,40 +443,36 @@ const Notification: React.FC<INotification> = (props) => {
     )
   );
 
+  const statusInfo = <StatusInfo avatarSize={avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />;
+
   return (
     <Hotkeys handlers={handlers} data-testid='notification'>
       <div
-        className='notification'
+        className='notification flex flex-col gap-2 p-4'
         tabIndex={0}
         aria-label={ariaLabel}
         ref={node}
       >
-        <div className='p-4'>
-          <div className='mb-2'>
-            <HStack alignItems='center' space={3}>
-              <div className='min-w-0 flex-1'>
-                <StatusInfo avatarSize={avatarSize} icon={renderIcon()} text={message} title={ariaLabel} />
-              </div>
+        {!['mention', 'status'].includes(notification.type) ? (
+          <HStack alignItems='center' space={3}>
+            <div className='min-w-0 flex-1'>
+              {statusInfo}
+            </div>
 
-              {!['mention', 'status'].includes(notification.type) && (
-                <div className='ml-auto flex-none'>
-                  <Text
-                    theme='muted'
-                    size='xs'
-                    truncate
-                    data-testid='message'
-                  >
-                    <RelativeTimestamp timestamp={notification.latest_page_notification_at!} theme='muted' size='sm' className='whitespace-nowrap' />
-                  </Text>
-                </div>
-              )}
-            </HStack>
-          </div>
+            <div className='ml-auto flex-none'>
+              <Text
+                theme='muted'
+                size='xs'
+                truncate
+                data-testid='message'
+              >
+                <RelativeTimestamp timestamp={notification.latest_page_notification_at!} theme='muted' size='sm' className='whitespace-nowrap' />
+              </Text>
+            </div>
+          </HStack>
+        ) : statusInfo}
 
-          <div>
-            {renderContent()}
-          </div>
-        </div>
+        {renderContent()}
       </div>
     </Hotkeys>
   );