From e0e2ed97240ede1fe1a54f88716bc3c5830a18b0 Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Thu, 3 Oct 2024 12:36:24 -0500
Subject: [PATCH] Unclutter notifications view

---
 .changeset/pink-hotels-behave.md                   |  5 +++++
 .../components/notification-icon-entry.tsx         |  7 +++++--
 .../notifications/components/notification-item.tsx | 14 ++++++++------
 3 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/pink-hotels-behave.md

diff --git a/.changeset/pink-hotels-behave.md b/.changeset/pink-hotels-behave.md
new file mode 100644
index 000000000..20fd126e1
--- /dev/null
+++ b/.changeset/pink-hotels-behave.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Unclutter notifications view
diff --git a/src/views/notifications/components/notification-icon-entry.tsx b/src/views/notifications/components/notification-icon-entry.tsx
index 2ed665ea7..025a3c192 100644
--- a/src/views/notifications/components/notification-icon-entry.tsx
+++ b/src/views/notifications/components/notification-icon-entry.tsx
@@ -84,11 +84,14 @@ const NotificationIconEntry = memo(
             bg={!read ? focusColor : undefined}
             ref={headerRef}
             overflow="hidden"
+            _hover={{ backgroundColor: "var(--chakra-colors-card-hover-overlay)" }}
           >
             <Box>{icon}</Box>
-            <UserAvatar pubkey={pubkey} size="sm" />
+            <UserAvatar pubkey={pubkey} hideFrom="md" size="sm" />
             <UserName pubkey={pubkey} hideBelow="md" />
-            <Text isTruncated>{summary}</Text>
+            <Text isTruncated color={read ? "GrayText" : undefined}>
+              {summary}
+            </Text>
             <Spacer />
             {read && <CheckIcon boxSize={5} color="green.500" />}
             <Timestamp timestamp={timestamp} whiteSpace="pre" />
diff --git a/src/views/notifications/components/notification-item.tsx b/src/views/notifications/components/notification-item.tsx
index 2bb4c41b0..c1884043d 100644
--- a/src/views/notifications/components/notification-item.tsx
+++ b/src/views/notifications/components/notification-item.tsx
@@ -69,7 +69,7 @@ const ReplyNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onClic
     return (
       <NotificationIconEntry
         ref={ref}
-        icon={<ReplyIcon boxSize={8} color="green.400" />}
+        icon={<ReplyIcon boxSize={6} color="green.400" />}
         id={event.id}
         pubkey={event.pubkey}
         timestamp={event.created_at}
@@ -101,7 +101,7 @@ const MentionNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onCl
     return (
       <NotificationIconEntry
         ref={ref}
-        icon={<AtIcon boxSize={8} color="purple.400" />}
+        icon={<AtIcon boxSize={6} color="purple.400" />}
         id={event.id}
         pubkey={event.pubkey}
         timestamp={event.created_at}
@@ -122,7 +122,7 @@ const RepostNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onCli
     return (
       <NotificationIconEntry
         ref={ref}
-        icon={<RepostIcon boxSize={8} color="blue.400" />}
+        icon={<RepostIcon boxSize={6} color="blue.400" />}
         id={event.id}
         pubkey={event.pubkey}
         timestamp={event.created_at}
@@ -150,14 +150,16 @@ const ReactionNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onC
     return (
       <NotificationIconEntry
         ref={ref}
-        icon={<Heart boxSize={8} color="red.400" />}
+        icon={<Heart boxSize={6} color="red.400" />}
         id={event.id}
         pubkey={event.pubkey}
         timestamp={event.created_at}
         summary={
           <>
             <ReactionIcon emoji={event.content} />
-            {reactedEvent?.content}
+            <Text fontStyle="italic" as="span" ml="2" mr="2" fontSize="sm">
+              {reactedEvent?.content}
+            </Text>
           </>
         }
         onClick={onClick}
@@ -207,7 +209,7 @@ const ZapNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onClick?
     return (
       <NotificationIconEntry
         ref={ref}
-        icon={<LightningIcon boxSize={8} color="yellow.400" />}
+        icon={<LightningIcon boxSize={6} color="yellow.400" />}
         id={event.id}
         pubkey={zap.request.pubkey}
         timestamp={zap.request.created_at}