Unclutter notifications view

hzrd149 · Oct 3, 2024 · e0e2ed9 · e0e2ed9
1 parent 38bc52b
commit e0e2ed9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/.changeset/pink-hotels-behave.md 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
@@ -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
@@ -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}