highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-10 21:00:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add colors to notifications view

Browse Source
This commit is contained in:
hzrd149 2023-11-27 11:12:10 -06:00
parent 487dabaede
commit 6ab2d1c279
3 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/late-insects-return.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": minor
---
Add colors to notifications view

43
src/views/notifications/notification-item.tsx
View File

@ -34,30 +34,34 @@ const ExpandableToggleButton = ({
/>
);
const ReplyNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ event }, ref) => {
const account = useCurrentAccount();
const Kind1Notification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ event }, ref) => {
const account = useCurrentAccount()!;
const refs = getReferences(event);
const parent = useSingleEvent(refs.replyId);
if (!refs.replyId || (parent && parent.pubkey !== account?.pubkey)) return null;
const isReplyingToMe = !!refs.replyId && (parent ? parent.pubkey === account.pubkey : true);
const isMentioned = isMentionedInContent(event, account.pubkey);
return (
<Flex gap="2" ref={ref}>
<IconBox>
<ReplyIcon boxSize={8} />
</IconBox>
<Flex direction="column" w="full" gap="2">
<EmbedEvent event={event} />
</Flex>
</Flex>
);
if (isReplyingToMe) return <ReplyNotification event={event} ref={ref} />;
else if (isMentioned) return <MentionNotification event={event} ref={ref} />;
else return null;
});
const ReplyNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ event }, ref) => (
<Flex gap="2" ref={ref}>
<IconBox>
<ReplyIcon boxSize={8} color="green.400" />
</IconBox>
<Flex direction="column" w="full" gap="2">
<EmbedEvent event={event} />
</Flex>
</Flex>
));
const MentionNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ event }, ref) => {
return (
<Flex gap="2" ref={ref}>
<IconBox>
<AtIcon boxSize={8} />
<AtIcon boxSize={8} color="purple.400" />
</IconBox>
<Flex direction="column" w="full" gap="2">
<EmbedEvent event={event} />
@ -76,7 +80,7 @@ const RepostNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({
return (
<Flex gap="2" ref={ref}>
<IconBox>
<RepostIcon boxSize={8} />
<RepostIcon boxSize={8} color="blue.400" />
</IconBox>
<Flex direction="column" w="full" gap="2">
<Flex gap="2" alignItems="center">
@ -100,7 +104,7 @@ const ReactionNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>((
return (
<Flex gap="2" ref={ref}>
<IconBox>
<Heart boxSize={8} />
<Heart boxSize={8} color="red.400" />
</IconBox>
<Flex direction="column" w="full" gap="2">
<Flex gap="2" alignItems="center">
@ -152,7 +156,7 @@ const ZapNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ eve
return (
<Flex gap="2" ref={ref}>
<IconBox>
<LightningIcon boxSize={8} />
<LightningIcon boxSize={8} color="yellow.400" />
</IconBox>
<Flex direction="column" w="full" gap="2">
<Flex gap="2" alignItems="center">
@ -170,16 +174,13 @@ const ZapNotification = forwardRef<HTMLDivElement, { event: NostrEvent }>(({ eve
});
const NotificationItem = ({ event }: { event: NostrEvent }) => {
const account = useCurrentAccount();
const ref = useRef<HTMLDivElement | null>(null);
useRegisterIntersectionEntity(ref, getEventUID(event));
let content: ReactNode | null = null;
switch (event.kind) {
case Kind.Text:
if (isReply(event)) content = <ReplyNotification event={event} ref={ref} />;
else if (account?.pubkey && isMentionedInContent(event, account.pubkey))
content = <MentionNotification event={event} ref={ref} />;
content = <Kind1Notification event={event} ref={ref} />;
break;
case Kind.Reaction:
content = <ReactionNotification event={event} ref={ref} />;

17
src/views/notifications/notification-type-toggles.tsx
View File

@ -4,8 +4,16 @@ import Heart from "../../components/icons/heart";
type Disclosure = { isOpen: boolean; onToggle: () => void };
function ToggleIconButton({ toggle, ...props }: IconButtonProps & { toggle: Disclosure }) {
return <IconButton colorScheme={toggle.isOpen ? "primary" : undefined} onClick={toggle.onToggle} {...props} />;
function ToggleIconButton({ toggle, colorScheme, color, ...props }: IconButtonProps & { toggle: Disclosure }) {
return (
<IconButton
// colorScheme={toggle.isOpen ? colorScheme || "primary" : undefined}
color={toggle.isOpen ? color : undefined}
variant={toggle.isOpen ? "outline" : "ghost"}
onClick={toggle.onToggle}
{...props}
/>
);
}
type NotificationTypeTogglesPropTypes = Omit<ButtonGroupProps, "children"> & {
@ -31,30 +39,35 @@ export default function NotificationTypeToggles({
aria-label="Toggle replies"
title="Toggle replies"
toggle={showReplies}
color="green.400"
/>
<ToggleIconButton
icon={<AtIcon boxSize={5} />}
aria-label="Toggle reposts"
title="Toggle reposts"
toggle={showMentions}
color="purple.400"
/>
<ToggleIconButton
icon={<LightningIcon boxSize={5} />}
aria-label="Toggle zaps"
title="Toggle zaps"
toggle={showZaps}
color="yellow.400"
/>
<ToggleIconButton
icon={<RepostIcon boxSize={5} />}
aria-label="Toggle reposts"
title="Toggle reposts"
toggle={showReposts}
color="blue.400"
/>
<ToggleIconButton
icon={<Heart boxSize={5} />}
aria-label="Toggle reactions"
title="Toggle reactions"
toggle={showReactions}
color="red.400"
/>
</ButtonGroup>
);