diff --git a/src/views/badges/components/badge-award-card.tsx b/src/views/badges/components/badge-award-card.tsx
index 8fdf86f2b..c8ca9b3f9 100644
--- a/src/views/badges/components/badge-award-card.tsx
+++ b/src/views/badges/components/badge-award-card.tsx
@@ -1,5 +1,5 @@
-import { useRef } from "react";
-import { Card, Flex, Image, Link, LinkBox, Text } from "@chakra-ui/react";
+import { memo, useRef } from "react";
+import { Button, Card, Flex, Image, Link, LinkBox, Text, useDisclosure } from "@chakra-ui/react";
import { Link as RouterLink } from "react-router-dom";
import { getBadgeAwardBadge, getBadgeAwardPubkeys, getBadgeImage, getBadgeName } from "../../../helpers/nostr/badges";
@@ -12,8 +12,16 @@ import { UserLink } from "../../../components/user-link";
import Timestamp from "../../../components/timestamp";
import UserAvatarLink from "../../../components/user-avatar-link";
+const UserCard = memo(({ pubkey }: { pubkey: string }) => (
+
+
+
+
+));
+
export default function BadgeAwardCard({ award, showImage = true }: { award: NostrEvent; showImage?: boolean }) {
const badge = useReplaceableEvent(getBadgeAwardBadge(award));
+ const showAll = useDisclosure();
// if there is a parent intersection observer, register this card
const ref = useRef(null);
@@ -21,6 +29,9 @@ export default function BadgeAwardCard({ award, showImage = true }: { award: Nos
if (!badge) return null;
+ const awards = getBadgeAwardPubkeys(award);
+ const collapsed = !showAll.isOpen && awards.length > 10;
+
const naddr = getSharableEventAddress(badge);
return (
@@ -41,12 +52,14 @@ export default function BadgeAwardCard({ award, showImage = true }: { award: Nos
- {getBadgeAwardPubkeys(award).map(({ pubkey }) => (
-
-
-
-
+ {(collapsed ? awards.slice(0, 10) : awards).map(({ pubkey }) => (
+
))}
+ {collapsed && (
+
+ )}
diff --git a/src/views/badges/index.tsx b/src/views/badges/index.tsx
index 1981b4dcd..820b466e2 100644
--- a/src/views/badges/index.tsx
+++ b/src/views/badges/index.tsx
@@ -13,14 +13,29 @@ import IntersectionObserverProvider from "../../providers/intersection-observer"
import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
import BadgeAwardCard from "./components/badge-award-card";
import { ErrorBoundary } from "../../components/error-boundary";
+import useClientSideMuteFilter from "../../hooks/use-client-side-mute-filter";
+import { useCallback } from "react";
function BadgesPage() {
const { filter, listId } = usePeopleListContext();
+ const muteFilter = useClientSideMuteFilter();
+ const eventFilter = useCallback(
+ (e) => {
+ if (muteFilter(e)) return false;
+ return true;
+ },
+ [muteFilter],
+ );
const readRelays = useReadRelayUrls();
- const timeline = useTimelineLoader(`${listId}-lists`, readRelays, {
- "#p": filter?.authors,
- kinds: [Kind.BadgeAward],
- });
+ const timeline = useTimelineLoader(
+ `${listId}-lists`,
+ readRelays,
+ {
+ "#p": filter?.authors,
+ kinds: [Kind.BadgeAward],
+ },
+ { eventFilter },
+ );
const awards = useSubject(timeline.timeline);
const callback = useTimelineCurserIntersectionCallback(timeline);