Add "show more" button when viewing all reactions

.changeset/ten-apes-talk.md

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

src/components/reaction-details-modal.tsx

@@ -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 key={group.emoji} direction="column" gap="2">
-              <Flex gap="2" py="2" alignItems="center">
+              <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">
+              <ShowMoreGrid pubkeys={group.pubkeys} columns={{ base: 2, sm: 3, md: 4 }} cutoff={12} />
-                {group.pubkeys.map((pubkey) => (
+            </Flex>
-                  <Flex gap="2" key={pubkey} alignItems="center" overflow="hidden">
-                    <UserAvatarLink pubkey={pubkey} size="xs" />
-                    <UserLink pubkey={pubkey} isTruncated />
-                  </Flex>
-                ))}
-              </SimpleGrid>
-            </Box>
           ))}
         </ModalBody>
       </ModalContent>