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

Add "show more" button when viewing all reactions

Browse Source
This commit is contained in:
hzrd149 2023-10-19 09:14:30 -05:00
parent 22c7554b0b
commit 35236c6755
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/ten-apes-talk.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": patch
---
Add "show more" button when viewing all reactions

47
src/components/reaction-details-modal.tsx
View File

@ -1,9 +1,8 @@
import {
AvatarGroup,
Box,
Button,
Divider,
Flex,
Heading,
Modal,
ModalBody,
ModalCloseButton,
@ -12,6 +11,8 @@ import {
ModalOverlay,
ModalProps,
SimpleGrid,
SimpleGridProps,
useDisclosure,
} from "@chakra-ui/react";
import { useMemo } from "react";
@ -25,6 +26,33 @@ export type ReactionDetailsModalProps = Omit<ModalProps, "children"> & {
reactions: NostrEvent[];
};
function ShowMoreGrid({
pubkeys,
cutoff,
...props
}: Omit<SimpleGridProps, "children"> & { pubkeys: string[]; cutoff: number }) {
const showMore = useDisclosure();
const limited = pubkeys.length > cutoff && !showMore.isOpen ? pubkeys.slice(0, cutoff) : pubkeys;
return (
<>
<SimpleGrid spacing="1" {...props}>
{limited.map((pubkey) => (
<Flex gap="2" key={pubkey} alignItems="center" overflow="hidden">
<UserAvatarLink pubkey={pubkey} size="xs" />
<UserLink pubkey={pubkey} isTruncated />
</Flex>
))}
</SimpleGrid>
{limited.length !== pubkeys.length && (
<Button variant="link" size="md" onClick={showMore.onOpen}>
Show {pubkeys.length - limited.length} more
</Button>
)}
</>
);
}
export default function ReactionDetailsModal({ reactions, onClose, ...props }: ReactionDetailsModalProps) {
const groups = useMemo(() => groupReactions(reactions), [reactions]);
@ -38,22 +66,15 @@ export default function ReactionDetailsModal({ reactions, onClose, ...props }: R
<ModalCloseButton />
<ModalBody display="flex" gap="2" px="4" pt="0" flexDirection="column">
{groups.map((group) => (
<Box key={group.emoji}>
<Flex gap="2" py="2" alignItems="center">
<Flex key={group.emoji} direction="column" gap="2">
<Flex gap="2" alignItems="center">
<Box fontSize="lg" borderWidth={1} w="8" h="8" borderRadius="md" p="1">
<ReactionIcon emoji={group.emoji} url={group.url} />
</Box>
<Divider />
</Flex>
<SimpleGrid columns={{ base: 2, sm: 3, md: 4 }} spacing="1">
{group.pubkeys.map((pubkey) => (
<Flex gap="2" key={pubkey} alignItems="center" overflow="hidden">
<UserAvatarLink pubkey={pubkey} size="xs" />
<UserLink pubkey={pubkey} isTruncated />
</Flex>
))}
</SimpleGrid>
</Box>
<ShowMoreGrid pubkeys={group.pubkeys} columns={{ base: 2, sm: 3, md: 4 }} cutoff={12} />
</Flex>
))}
</ModalBody>
</ModalContent>