diff --git a/src/components/CommunityDetailPage.tsx b/src/components/CommunityDetailPage.tsx index f42fbb34..fc05c16b 100644 --- a/src/components/CommunityDetailPage.tsx +++ b/src/components/CommunityDetailPage.tsx @@ -303,7 +303,16 @@ export function CommunityDetailPage({ event }: { event: NostrEvent }) { showFAB: activeTab === 'comments' || activeTab === 'fundraising', onFabClick: handleFabClick, fabIcon, - rightSidebar: communityATag ? : undefined, + rightSidebar: communityATag ? ( + + ) : undefined, }); const moderationCtx = useMemo( diff --git a/src/components/CommunityRightSidebar.tsx b/src/components/CommunityRightSidebar.tsx index e7d65216..4780affc 100644 --- a/src/components/CommunityRightSidebar.tsx +++ b/src/components/CommunityRightSidebar.tsx @@ -1,19 +1,19 @@ -import { Compass, MessageCircle, CalendarClock } from 'lucide-react'; +import { MessageCircle, Shield, Target, Users } from 'lucide-react'; +import type { ParsedCommunity } from '@/lib/communityUtils'; import { LinkFooter } from '@/components/LinkFooter'; -import { SuggestedCommunitiesWidget } from '@/components/widgets/SuggestedCommunitiesWidget'; import { ActiveConversationsWidget } from '@/components/widgets/ActiveConversationsWidget'; -import { UpcomingEventsWidget } from '@/components/widgets/UpcomingEventsWidget'; +import { MyCommunitiesWidget } from '@/components/widgets/MyCommunitiesWidget'; +import { CommunityFundraisingWidget } from '@/components/widgets/CommunityFundraisingWidget'; import { cn } from '@/lib/utils'; interface CommunityRightSidebarProps { - /** - * When viewing a specific community, pass its a-tag (`34550::`). - * - Suggested Communities will exclude it from the list. - * - Active Conversations will scope to just that community. - * - Upcoming Events will scope to events tagged to that community. - */ scopedATag?: string; + community?: ParsedCommunity | null; + memberCount?: number; + viewerRank?: number; + reportsCount?: number; + activeGoalsCount?: number; className?: string; } @@ -35,12 +35,63 @@ function Section({ title, icon, children }: SectionProps) { ); } -/** - * Curated right-hand sidebar for the Communities listing page and individual - * community detail pages. Surfaces three widgets that complement community - * browsing without overlapping the main feed. - */ -export function CommunityRightSidebar({ scopedATag, className }: CommunityRightSidebarProps) { +function getRoleLabel(rank: number | undefined): string { + if (rank === undefined) return 'Observer'; + if (rank === 0) return 'Leadership'; + return `Member (rank ${rank})`; +} + +function CommunitySnapshot({ + community, + memberCount, + viewerRank, + reportsCount, + activeGoalsCount, +}: { + community: ParsedCommunity; + memberCount?: number; + viewerRank?: number; + reportsCount?: number; + activeGoalsCount?: number; +}) { + return ( +
+

{community.name}

+
+
+

Members

+

{memberCount ?? 0}

+
+
+

Moderators

+

{community.moderatorPubkeys.length}

+
+
+

Your role

+

{getRoleLabel(viewerRank)}

+
+
+

Open reports

+

{reportsCount ?? 0}

+
+
+

+ {activeGoalsCount ?? 0} active goal{activeGoalsCount === 1 ? '' : 's'} in fundraising. +

+
+ ); +} + +/** Community-focused right sidebar for overview and detail pages. */ +export function CommunityRightSidebar({ + scopedATag, + community, + memberCount, + viewerRank, + reportsCount, + activeGoalsCount, + className, +}: CommunityRightSidebarProps) { return (