From bf669de3c67b3ad8b49a405cc1f2aae2d43ed7ec Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Mon, 14 Sep 2026 07:36:40 -0400
Subject: [PATCH 1/7] Add funding pool widget to RFP header

Behind the rfpFundingPool flag, replace the amount eyebrow and the bare
Contribute button with a compact block in the header's CTA column. It
shows the pool total, a bar splitting the original grant from community
contributions, a one-line breakdown, and an outlined "Add to pool" button
directly under the figures. A hairline separates the primary "Apply"
button below it, so applying reads as a distinct task from funding. Full
figures (funder, community, allocated, and ready-to-allocate for
managers) live in an info tooltip so the block stays the height of the
title beside it.

Also: the contribute modal passes the updated pool back on RSC and credit
contributions so the header updates without a refetch, its pool-mode title
matches the button, and activity copy for pool contributions is shortened.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../WorkHeader/GrantFundingPoolWidget.tsx     | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/components/work/WorkHeader/GrantFundingPoolWidget.tsx b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
index b995bfcaa..bc9d1d429 100644
--- a/components/work/WorkHeader/GrantFundingPoolWidget.tsx
+++ b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
@@ -114,10 +114,7 @@ export function GrantFundingPoolWidget({
   const nothingToDo = !canApply && !isOpen;
 
   return (
-    <div
-      data-testid="grant-funding-pool"
-      className={cn('w-full rounded-xl border border-gray-200 bg-white px-3.5 py-3', className)}
-    >
+    <div data-testid="grant-funding-pool" className={cn('w-full', className)}>
       <div className="flex items-baseline justify-between gap-3">
         <span className="flex items-center gap-1 text-xs text-gray-500">
           Funding pool
@@ -180,41 +177,41 @@ export function GrantFundingPoolWidget({
         )}
       </div>
 
-      {nothingToDo ? (
-        <p className="mt-3 text-center text-xs text-gray-500">This RFP is closed</p>
-      ) : (
-        <div className="mt-3 flex flex-col gap-2">
-          {canApply && (
-            <SubmitProposalTooltip
-              isPrivate={applicationVisibility === 'PRIVATE'}
-              wrapperClassName="w-full"
-            >
-              <Button
-                data-testid="grant-submit-proposal"
-                variant="default"
-                size="md"
-                onClick={onApply}
-                className="w-full gap-2"
-              >
-                Apply with proposal
-                <ArrowUpFromLine className="h-4 w-4" />
-              </Button>
-            </SubmitProposalTooltip>
-          )}
-          {isOpen && (
+      {/* The pool's own action sits directly under its figures; Apply is separated by a rule so it reads as a different task. */}
+      {isOpen && (
+        <Button
+          data-testid="grant-contribute"
+          variant="outlined"
+          size="md"
+          onClick={onContribute}
+          className="mt-2.5 w-full gap-2"
+        >
+          <Coins className="h-4 w-4" />
+          Add to pool
+        </Button>
+      )}
+
+      {canApply && (
+        <div className={cn('border-t border-gray-200 pt-2.5', isOpen ? 'mt-3' : 'mt-2.5')}>
+          <SubmitProposalTooltip
+            isPrivate={applicationVisibility === 'PRIVATE'}
+            wrapperClassName="w-full"
+          >
             <Button
-              data-testid="grant-contribute"
-              variant="outlined"
+              data-testid="grant-submit-proposal"
+              variant="default"
               size="md"
-              onClick={onContribute}
+              onClick={onApply}
               className="w-full gap-2"
             >
-              <Coins className="h-4 w-4" />
-              Add to the pool
+              Apply
+              <ArrowUpFromLine className="h-4 w-4" />
             </Button>
-          )}
+          </SubmitProposalTooltip>
         </div>
       )}
+
+      {nothingToDo && <p className="mt-3 text-center text-xs text-gray-500">This RFP is closed</p>}
     </div>
   );
 }

From 9910bf37f4a9e3d5923b8cad05e391057b9fd305 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Mon, 14 Sep 2026 20:50:08 -0400
Subject: [PATCH 2/7] Refining UI of funding pool

---
 app/globals.css                               | 11 +++-
 app/layouts/MobileBottomNav.tsx               | 20 ++++---
 app/layouts/PageLayout.tsx                    | 10 +++-
 components/Notebook/AgentChatPanel.tsx        |  2 +-
 components/Notebook/NoteEditorLayout.tsx      |  2 +-
 ...leChromeOffsets.ts => mobileBarOffsets.ts} |  9 ++--
 .../WorkHeader/GrantFundingPoolWidget.tsx     | 54 ++++++++++++-------
 .../work/WorkHeader/WorkHeaderGrant.tsx       |  6 ++-
 8 files changed, 78 insertions(+), 36 deletions(-)
 rename components/Notebook/{mobileChromeOffsets.ts => mobileBarOffsets.ts} (88%)

diff --git a/app/globals.css b/app/globals.css
index 8fe7cb8bf..31dc8791b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -161,9 +161,16 @@ mark {
     padding-top: calc(56px + var(--top-bar-height)) !important;
   }
 
-  /* Reserve space for the fixed MobileBottomNav (h-16 + safe-area inset) plus
-     the funding power bar docked above it (3.75rem including its gutter). */
+  /* Reserve space for the fixed MobileBottomNav (h-16 + safe-area inset), so
+     the last of the page's content isn't stuck behind it. */
   .page-layout-with-mobile-bottom-nav {
+    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  /* As above, plus the funding power bar docked over the nav on the home tabs
+     (3.75rem including its gutter). Pages without that bar use the shorter
+     offset, or the unused space reads as a dead gap under the content. */
+  .page-layout-with-mobile-bottom-nav-and-funding-bar {
     padding-bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px));
   }
 }
diff --git a/app/layouts/MobileBottomNav.tsx b/app/layouts/MobileBottomNav.tsx
index 5cc23ab25..547e42150 100644
--- a/app/layouts/MobileBottomNav.tsx
+++ b/app/layouts/MobileBottomNav.tsx
@@ -230,19 +230,25 @@ export const MobileBottomNav: React.FC = () => {
       {/* Docked over the content directly above the nav, sharing its scroll
           fade so the two read as one piece of chrome. The nav is z-[100].
 
+          Only the home tabs get it: elsewhere it covers page content that has
+          nothing to do with funding power, and PageLayout stops reserving room
+          for it. Keep this condition in sync with the padding class there.
+
           The wrapper spans the full width but only the bar inside it is drawn,
           so it stays `pointer-events-none` and FundingPowerBar re-enables hits
           on the bar itself. A fixed element swallows touch drags that start on
           it — they scroll the document, not the feed's scrollport — so every
           pixel of it that isn't a control is a band the feed can't be scrolled
           from, and `opacity-20` makes those bands invisible rather than absent. */}
-      <div
-        className={`pointer-events-none fixed bottom-16 left-0 right-0 z-[99] px-3 pb-2 tablet:!hidden transition-opacity duration-300 ease-in-out ${
-          isScrollingDown ? 'opacity-20' : 'opacity-100'
-        }`}
-      >
-        <FundingPowerBar />
-      </div>
+      {isHomeTabPath(pathname) && (
+        <div
+          className={`pointer-events-none fixed bottom-16 left-0 right-0 z-[99] px-3 pb-2 tablet:!hidden transition-opacity duration-300 ease-in-out ${
+            isScrollingDown ? 'opacity-20' : 'opacity-100'
+          }`}
+        >
+          <FundingPowerBar />
+        </div>
+      )}
 
       {/* Bottom Navigation Bar */}
       <nav
diff --git a/app/layouts/PageLayout.tsx b/app/layouts/PageLayout.tsx
index f345c7c59..f3cc9f54f 100644
--- a/app/layouts/PageLayout.tsx
+++ b/app/layouts/PageLayout.tsx
@@ -2,7 +2,9 @@
 
 import { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
+import { usePathname } from 'next/navigation';
 import { useMobileNavScroll } from '@/hooks/useMobileNavScroll';
+import { isHomeTabPath } from '@/hooks/useFundTabs';
 import { cn } from '@/lib/utils';
 import { ScrollContainerProvider } from '@/contexts/ScrollContainerContext';
 import { GrantProvider } from '@/contexts/GrantContext';
@@ -56,6 +58,8 @@ function PageLayoutInner({
   wideRow = false,
 }: PageLayoutProps) {
   const isNarrow = contentWidth === 'narrow';
+  const pathname = usePathname() || '';
+  const isHomeTab = isHomeTabPath(pathname);
 
   const {
     scrollContainerRef,
@@ -104,7 +108,11 @@ function PageLayoutInner({
           ref={scrollContainerRef}
           className={cn(
             'flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain relative transition-all duration-150',
-            'page-layout-with-mobile-bottom-nav',
+            // The funding power bar only docks above the nav on the home tabs
+            // (see MobileBottomNav), so only those pages reserve room for it.
+            isHomeTab
+              ? 'page-layout-with-mobile-bottom-nav-and-funding-bar'
+              : 'page-layout-with-mobile-bottom-nav',
             'pt-[var(--top-bar-height)] mt-0',
             'tablet:!pt-0 tablet:!mt-[var(--top-bar-height)]',
             isPromoBannerVisible && 'page-layout-with-promo-banner'
diff --git a/components/Notebook/AgentChatPanel.tsx b/components/Notebook/AgentChatPanel.tsx
index 485f75900..32e1318c0 100644
--- a/components/Notebook/AgentChatPanel.tsx
+++ b/components/Notebook/AgentChatPanel.tsx
@@ -17,7 +17,7 @@ import type { GenerationRequest } from '@/types/agentModels';
 import { ENDOWMENT_PROMO_BANNER_FEATURE } from '@/app/layouts/components/EndowmentPromoBanner';
 import { useDismissableFeature } from '@/hooks/useDismissableFeature';
 import { useEditorIsEmpty } from '@/hooks/useEditorIsEmpty';
-import { belowMobileTopBar } from '@/components/Notebook/mobileChromeOffsets';
+import { belowMobileTopBar } from '@/components/Notebook/mobileBarOffsets';
 import { NoteReviewControls } from '@/components/Notebook/NoteReview/NoteReviewControls';
 import { NoteReviewBanner } from '@/components/Notebook/NoteReview/NoteReviewBanner';
 import { useNoteAgentReview } from '@/components/Notebook/NoteReview/useNoteAgentReview';
diff --git a/components/Notebook/NoteEditorLayout.tsx b/components/Notebook/NoteEditorLayout.tsx
index b04e32117..ec3a61f45 100644
--- a/components/Notebook/NoteEditorLayout.tsx
+++ b/components/Notebook/NoteEditorLayout.tsx
@@ -16,7 +16,7 @@ import { NotesMenu } from './NotesMenu';
 import { PublishedStatusSection } from './PublishingForm/components/PublishedStatusSection';
 import { PublishingForm } from '@/components/Notebook/PublishingForm';
 
-import { ABOVE_MOBILE_NAV } from './mobileChromeOffsets';
+import { ABOVE_MOBILE_NAV } from './mobileBarOffsets';
 import { AgentChatPanel, type NoteReviewHandle } from '@/components/Notebook/AgentChatPanel';
 import { noteDiffPersistableDoc } from './NoteReview/noteDiffOverlay';
 import { NoteReviewControls } from './NoteReview/NoteReviewControls';
diff --git a/components/Notebook/mobileChromeOffsets.ts b/components/Notebook/mobileBarOffsets.ts
similarity index 88%
rename from components/Notebook/mobileChromeOffsets.ts
rename to components/Notebook/mobileBarOffsets.ts
index 7c1dc05ab..e05f5e7b4 100644
--- a/components/Notebook/mobileChromeOffsets.ts
+++ b/components/Notebook/mobileBarOffsets.ts
@@ -1,6 +1,7 @@
 /**
- * Offsets that keep the notebook's fixed overlays clear of the app's mobile
- * chrome.
+ * Offsets that keep the notebook's fixed overlays clear of the app's own fixed
+ * bars on mobile — the bottom nav and the top bar, not anything browser- or
+ * device-specific.
  *
  * Below the `tablet` breakpoint the app frames the viewport with two fixed
  * bars the rest of the layout has to work around: MobileBottomNav across the
@@ -12,7 +13,9 @@
  *
  * globals.css reserves the same space for in-flow content
  * (`.page-layout-with-mobile-bottom-nav`, `.page-layout-with-promo-banner`);
- * fixed overlays sit outside the flow and have to carry their own.
+ * fixed overlays sit outside the flow and have to carry their own. The
+ * notebook never shows the funding power bar that the home tabs dock over the
+ * nav, so the nav's own height is the whole of the bottom offset here.
  *
  * Entries name the desktop offset they stand in for, so a call site reads as a
  * swap — `bottom-6` becomes `ABOVE_MOBILE_NAV.bottom6` — keeping the same gap
diff --git a/components/work/WorkHeader/GrantFundingPoolWidget.tsx b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
index bc9d1d429..94f1c912d 100644
--- a/components/work/WorkHeader/GrantFundingPoolWidget.tsx
+++ b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
@@ -50,8 +50,12 @@ interface GrantFundingPoolWidgetProps {
 
 /**
  * One card for both audiences: researchers apply, funders add to the pool.
- * The breakdown is a single fixed-height line so the card matches the title
- * block beside it; the full numbers live in the info tooltip.
+ * Sized and positioned by its parent to sit directly above the right sidebar.
+ * Contribute is the loud CTA — solid primary, since shared links aim at
+ * funders — while applying stays a same-size quiet outline, so the two
+ * domains never read as one flow. The breakdown is a single fixed-height
+ * line so the card matches the title block beside it; the full numbers live
+ * in the info tooltip.
  */
 export function GrantFundingPoolWidget({
   organization,
@@ -114,11 +118,18 @@ export function GrantFundingPoolWidget({
   const nothingToDo = !canApply && !isOpen;
 
   return (
-    <div data-testid="grant-funding-pool" className={cn('w-full', className)}>
+    // Raised white panel, matching the FundingPowerCard that sits above the
+    // sidebar rail — at lg+ this widget occupies that same column, and on
+    // mobile the card keeps the thin funding bar from reading as a stray
+    // page rule.
+    <div
+      data-testid="grant-funding-pool"
+      className={cn('w-full rounded-lg border border-gray-200 bg-white p-4 shadow-sm', className)}
+    >
       <div className="flex items-baseline justify-between gap-3">
-        <span className="flex items-center gap-1 text-xs text-gray-500">
+        <span className="flex items-center gap-1.5 text-sm font-semibold text-gray-900">
           Funding pool
-          {!isOpen && <span className="text-gray-400">· Closed</span>}
+          {!isOpen && <span className="font-normal text-gray-400">· Closed</span>}
           <Tooltip content={breakdown} position="bottom" width="w-64" wrapperClassName="!h-auto">
             <button
               type="button"
@@ -126,7 +137,7 @@ export function GrantFundingPoolWidget({
               aria-label="How the funding pool works"
               data-testid="grant-funding-pool-info"
             >
-              <Info className="h-3.5 w-3.5" />
+              <Info className="h-4 w-4" />
             </button>
           </Tooltip>
         </span>
@@ -161,7 +172,7 @@ export function GrantFundingPoolWidget({
             {formatCompact(grantAmount, showUSD)}
           </span>
         </span>
-        {hasCommunityFunding ? (
+        {hasCommunityFunding && (
           <span className="flex items-center gap-1.5" title="Community contributions">
             <span className="h-2 w-2 rounded-sm bg-indigo-400" aria-hidden="true" />
             Community
@@ -169,43 +180,46 @@ export function GrantFundingPoolWidget({
               {formatCompact(raised, showUSD)}
             </span>
           </span>
-        ) : (
+        )}
+        {!hasCommunityFunding && !isOpen && (
           <span className="flex items-center gap-1.5">
             <span className="h-2 w-2 rounded-sm bg-gray-200" aria-hidden="true" />
-            {isOpen ? 'Be the first to add' : 'No community funding'}
+            No community funding
           </span>
         )}
       </div>
 
-      {/* The pool's own action sits directly under its figures; Apply is separated by a rule so it reads as a different task. */}
+      {/* One loud CTA, one quiet one at the same size: solid-primary contribute
+          carries the card (shared links aim at funders), applying stays an
+          outline. Fill — not color or size — separates the two domains. */}
       {isOpen && (
         <Button
           data-testid="grant-contribute"
-          variant="outlined"
-          size="md"
+          variant="default"
+          size="lg"
           onClick={onContribute}
-          className="mt-2.5 w-full gap-2"
+          className="mt-2.5 w-full gap-2 max-sm:!h-10 max-sm:!px-4 max-sm:!text-sm"
         >
-          <Coins className="h-4 w-4" />
+          <Coins className="h-5 w-5 max-sm:!h-4 max-sm:!w-4" />
           Add to pool
         </Button>
       )}
 
       {canApply && (
-        <div className={cn('border-t border-gray-200 pt-2.5', isOpen ? 'mt-3' : 'mt-2.5')}>
+        <div className="mt-2">
           <SubmitProposalTooltip
             isPrivate={applicationVisibility === 'PRIVATE'}
             wrapperClassName="w-full"
           >
             <Button
               data-testid="grant-submit-proposal"
-              variant="default"
-              size="md"
+              variant="outlined"
+              size="lg"
               onClick={onApply}
-              className="w-full gap-2"
+              className="w-full gap-2 max-sm:!h-10 max-sm:!px-4 max-sm:!text-sm"
             >
-              Apply
-              <ArrowUpFromLine className="h-4 w-4" />
+              <ArrowUpFromLine className="h-5 w-5 max-sm:!h-4 max-sm:!w-4" />
+              Submit proposal
             </Button>
           </SubmitProposalTooltip>
         </div>
diff --git a/components/work/WorkHeader/WorkHeaderGrant.tsx b/components/work/WorkHeader/WorkHeaderGrant.tsx
index 63cdbad76..24aad109d 100644
--- a/components/work/WorkHeader/WorkHeaderGrant.tsx
+++ b/components/work/WorkHeader/WorkHeaderGrant.tsx
@@ -160,7 +160,11 @@ export function WorkHeaderGrant({
   let primaryAction: ReactNode;
   if (showPoolWidget && fundingPool && grantAmount) {
     primaryAction = (
-      <div className="flex w-full flex-col sm:w-[304px]">
+      // At lg+ the right sidebar appears, so the widget takes the sidebar's
+      // exact column: w-80 to match, and -mr-8 to cancel the header's px-8 so
+      // its right edge lands on the shared 1180px container edge like the
+      // sidebar's does. Below lg there is no sidebar to align to.
+      <div className="flex w-full flex-col sm:w-[304px] lg:!-mr-8 lg:!w-80">
         <GrantFundingPoolWidget
           organization={organization ?? ''}
           grantAmount={grantAmount}

From f4a0cbc47e983f20d389a7fdf486925e253eb457 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Mon, 14 Sep 2026 21:08:23 -0400
Subject: [PATCH 3/7] Removing feature flag gating funding pools

---
 components/Funding/ProposalWorkCard.tsx       |  9 +--
 .../work/WorkHeader/WorkHeaderGrant.tsx       | 57 ++-----------------
 2 files changed, 6 insertions(+), 60 deletions(-)

diff --git a/components/Funding/ProposalWorkCard.tsx b/components/Funding/ProposalWorkCard.tsx
index 083b8ee16..2f59976ef 100644
--- a/components/Funding/ProposalWorkCard.tsx
+++ b/components/Funding/ProposalWorkCard.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { FC, useState, useCallback } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { Coins } from 'lucide-react';
 import {
   ActivityTimestamp,
@@ -29,8 +29,6 @@ import type { FeedEntry } from '@/types/feed';
 import type { Fundraise } from '@/types/funding';
 import type { FundingPool } from '@/types/grant';
 
-const RFP_FUNDING_POOL_PARAM = 'rfpFundingPool';
-
 interface ProposalWorkCardProps {
   entry: FeedEntry;
   /** Fired when the user opens the proposal, for feed click analytics. */
@@ -74,10 +72,6 @@ export const ProposalWorkCard: FC<ProposalWorkCardProps> = ({ entry, onNavigate
   const { updateLastClickedEntryId } = useNavigation();
   const { user } = useUser();
   const router = useRouter();
-  const searchParams = useSearchParams();
-  const isRfpFundingPoolEnabled =
-    searchParams.get(RFP_FUNDING_POOL_PARAM) === 'true' ||
-    searchParams.get(RFP_FUNDING_POOL_PARAM) === '1';
   const { isGrantScoped, refresh: refreshProposals } = useFundraises();
   const grantAllocate = useGrantAllocateContext();
 
@@ -98,7 +92,6 @@ export const ProposalWorkCard: FC<ProposalWorkCardProps> = ({ entry, onNavigate
   const canManagePool = isGrantCreator || !!user?.isModerator;
 
   const canAllocate =
-    isRfpFundingPoolEnabled &&
     isGrantScoped &&
     canManagePool &&
     fundingPool?.status === 'OPEN' &&
diff --git a/components/work/WorkHeader/WorkHeaderGrant.tsx b/components/work/WorkHeader/WorkHeaderGrant.tsx
index 24aad109d..4907d2dfa 100644
--- a/components/work/WorkHeader/WorkHeaderGrant.tsx
+++ b/components/work/WorkHeader/WorkHeaderGrant.tsx
@@ -2,7 +2,7 @@
 
 import { type ReactNode, useState, useCallback } from 'react';
 import { ArrowUpFromLine, Coins, Lock } from 'lucide-react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { Work } from '@/types/work';
 import { WorkMetadata } from '@/services/metadata.service';
 import { Button } from '@/components/ui/Button';
@@ -12,26 +12,13 @@ import { ContributeToFundraiseModal } from '@/components/modals/ContributeToFund
 import { useGrantTab, type GrantBannerTab } from '@/components/Funding/GrantPageContent';
 import { useFundraises } from '@/contexts/FundraiseContext';
 import { useUser } from '@/contexts/UserContext';
-import { useCurrencyPreference } from '@/contexts/CurrencyPreferenceContext';
 import type { FundingPool, FundingPoolAmount, GrantApplicationVisibility } from '@/types/grant';
-import { formatCurrency } from '@/utils/currency';
 import { ID } from '@/types/root';
 import { WorkHeader } from './WorkHeader';
 import { WorkHeaderGrantEyebrow } from './WorkHeaderGrantEyebrow';
 import { GrantFundingPoolWidget } from './GrantFundingPoolWidget';
 import { PendingReviewBadge } from './PendingReviewBadge';
 
-const RFP_FUNDING_POOL_PARAM = 'rfpFundingPool';
-
-function formatPoolAmount(amount: { usd: number; rsc: number }, showUSD: boolean): string {
-  return formatCurrency({
-    amount: showUSD ? amount.usd : amount.rsc,
-    showUSD,
-    exchangeRate: 1,
-    skipConversion: true,
-  });
-}
-
 interface WorkHeaderGrantProps {
   work: Work;
   metadata: WorkMetadata;
@@ -65,12 +52,7 @@ export function WorkHeaderGrant({
   preTitle,
 }: WorkHeaderGrantProps) {
   const router = useRouter();
-  const searchParams = useSearchParams();
   const { user } = useUser();
-  const { showUSD } = useCurrencyPreference();
-  const isRfpFundingPoolEnabled =
-    searchParams.get(RFP_FUNDING_POOL_PARAM) === 'true' ||
-    searchParams.get(RFP_FUNDING_POOL_PARAM) === '1';
   const [isApplyModalOpen, setIsApplyModalOpen] = useState(false);
   const [isContributeModalOpen, setIsContributeModalOpen] = useState(false);
   const {
@@ -96,8 +78,8 @@ export function WorkHeaderGrant({
   const canManagePool = isGrantCreator || !!user?.isModerator;
 
   // The pool widget replaces the amount eyebrow and the bare Contribute button
-  // whenever the flag is on and the grant has a pool, open or closed.
-  const showPoolWidget = isRfpFundingPoolEnabled && !!fundingPool && !!grantAmount;
+  // whenever the grant has a pool, open or closed.
+  const showPoolWidget = !!fundingPool && !!grantAmount;
   const isPoolOpen = !!grantId && isActive && fundingPool?.status === 'OPEN';
 
   const eyebrow = showPoolWidget ? (
@@ -109,7 +91,6 @@ export function WorkHeaderGrant({
   );
 
   const requiresPrivateApplications = applicationVisibility === 'PRIVATE';
-  const canContributeToPool = isRfpFundingPoolEnabled && isPoolOpen;
 
   const handleContributeSuccess = useCallback(
     (updatedPool?: FundingPool) => {
@@ -150,13 +131,6 @@ export function WorkHeaderGrant({
     </div>
   ) : null;
 
-  const showLegacyPoolHolding =
-    !showPoolWidget &&
-    isRfpFundingPoolEnabled &&
-    canManagePool &&
-    fundingPool?.status === 'OPEN' &&
-    (fundingPool.amountHolding.rsc ?? 0) >= 0;
-
   let primaryAction: ReactNode;
   if (showPoolWidget && fundingPool && grantAmount) {
     primaryAction = (
@@ -182,7 +156,7 @@ export function WorkHeaderGrant({
     primaryAction = (
       <>
         <div className="flex flex-col sm:flex-row gap-2 w-full">
-          {canContributeToPool && (
+          {isPoolOpen && (
             <Button
               data-testid="grant-contribute"
               variant="outlined"
@@ -196,27 +170,6 @@ export function WorkHeaderGrant({
           )}
           {submitProposalButton}
         </div>
-        {showLegacyPoolHolding && fundingPool && (
-          <div
-            data-testid="grant-pool-holding"
-            className="hidden sm:flex items-center justify-center gap-x-3 text-xs text-gray-500"
-          >
-            <span>
-              Pool holding{' '}
-              <span className="font-mono font-medium text-gray-700 tabular-nums">
-                {formatPoolAmount(fundingPool.amountHolding, showUSD)}
-              </span>
-            </span>
-            {(fundingPool.amountDistributed.rsc ?? 0) > 0 && (
-              <span>
-                Distributed{' '}
-                <span className="font-mono text-gray-600 tabular-nums">
-                  {formatPoolAmount(fundingPool.amountDistributed, showUSD)}
-                </span>
-              </span>
-            )}
-          </div>
-        )}
         {privateApplicationsNote}
       </>
     );
@@ -297,7 +250,7 @@ export function WorkHeaderGrant({
         }
       />
 
-      {isRfpFundingPoolEnabled && fundingPool?.status === 'OPEN' && (
+      {fundingPool?.status === 'OPEN' && (
         <ContributeToFundraiseModal
           mode="fundingPool"
           isOpen={isContributeModalOpen}

From 0eef11875c4d2681c032c403438cf31e9ba50699 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Tue, 15 Sep 2026 08:49:12 -0400
Subject: [PATCH 4/7] Updating UI for pool allocation modal

---
 components/Funding/ProposalWorkCard.tsx       |  6 +-
 .../modals/AllocateFundingPoolModal.tsx       | 65 ++++++++++++++-----
 2 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/components/Funding/ProposalWorkCard.tsx b/components/Funding/ProposalWorkCard.tsx
index 2f59976ef..7909c1d5f 100644
--- a/components/Funding/ProposalWorkCard.tsx
+++ b/components/Funding/ProposalWorkCard.tsx
@@ -91,11 +91,13 @@ export const ProposalWorkCard: FC<ProposalWorkCardProps> = ({ entry, onNavigate
     Number(user.id) === Number(grantAllocate.grantCreatedByUserId);
   const canManagePool = isGrantCreator || !!user?.isModerator;
 
+  // The button stays visible once the viewer can manage an open pool, even when
+  // nothing is left to give — the modal explains the exhausted balance rather
+  // than the action silently disappearing.
   const canAllocate =
     isGrantScoped &&
     canManagePool &&
     fundingPool?.status === 'OPEN' &&
-    (fundingPool.amountHolding.rsc ?? 0) > 0 &&
     work?.fundraise?.status === 'OPEN' &&
     applicationId != null;
 
@@ -156,7 +158,7 @@ export const ProposalWorkCard: FC<ProposalWorkCardProps> = ({ entry, onNavigate
             {canAllocate && (
               <Button
                 data-testid="allocate-funding-pool"
-                variant="outlined"
+                variant="dark"
                 size="sm"
                 className="shrink-0 gap-1.5"
                 onClick={(e) => {
diff --git a/components/modals/AllocateFundingPoolModal.tsx b/components/modals/AllocateFundingPoolModal.tsx
index 9e108d5c4..5f48cc2fd 100644
--- a/components/modals/AllocateFundingPoolModal.tsx
+++ b/components/modals/AllocateFundingPoolModal.tsx
@@ -12,6 +12,7 @@ import { extractApiErrorMessage } from '@/services/lib/serviceUtils';
 import type { FundingPool } from '@/types/grant';
 import { formatCurrency } from '@/utils/currency';
 import { validatePositiveDecimal } from '@/utils/number';
+import { cn } from '@/utils/styles';
 import { ID } from '@/types/root';
 
 interface AllocateFundingPoolModalProps {
@@ -136,6 +137,7 @@ export function AllocateFundingPoolModal({
   const { amount: parsedDisplayAmount, error: parsedError } = amountInput.trim()
     ? validateAmount(amountInput)
     : { amount: NaN, error: undefined };
+  const hasFundsToAllocate = holdingDisplay > 0;
   const canSubmit =
     Number.isFinite(parsedDisplayAmount) &&
     parsedDisplayAmount > 0 &&
@@ -146,31 +148,54 @@ export function AllocateFundingPoolModal({
     !parsedError;
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Allocate to proposal">
+    <Modal isOpen={isOpen} onClose={onClose} title="Allocate community contributions">
       <div className="space-y-4">
-        <p className="text-sm text-gray-600 line-clamp-2">{proposalTitle}</p>
-
-        <div className="rounded-lg bg-gray-50 border border-gray-100 px-3 py-2.5 text-sm">
-          <div className="flex justify-between items-center gap-3">
-            <span className="text-gray-500">Pool holding</span>
-            <span className="font-mono font-medium text-gray-900 tabular-nums">
-              {formatPoolAmount(fundingPool.amountHolding)}
-            </span>
-          </div>
-          <div className="flex justify-between items-center gap-3 mt-1">
-            <span className="text-gray-500">Already distributed</span>
-            <span className="font-mono text-gray-700 tabular-nums">
-              {formatPoolAmount(fundingPool.amountDistributed)}
-            </span>
+        <p className="text-sm text-gray-600">
+          Allocate community contributions towards this proposal{' '}
+          <span className="font-medium text-gray-900">{proposalTitle}</span>
+        </p>
+
+        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3.5 py-3">
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-gray-600">Total contribution by community</span>
+              <span className="font-mono tabular-nums text-gray-900">
+                {formatPoolAmount(fundingPool.amountRaised)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-gray-600">Already allocated to proposals</span>
+              <span className="font-mono tabular-nums text-gray-900">
+                {formatPoolAmount(fundingPool.amountDistributed)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between gap-3 border-t border-gray-200 pt-2">
+              <span className="font-medium text-gray-900">Available to allocate</span>
+              <span
+                className={cn(
+                  'font-mono font-semibold tabular-nums',
+                  hasFundsToAllocate ? 'text-green-600' : 'text-gray-400'
+                )}
+              >
+                {formatPoolAmount(fundingPool.amountHolding)}
+              </span>
+            </div>
           </div>
         </div>
 
+        {!hasFundsToAllocate && (
+          <p className="text-sm text-gray-500">
+            Every community contribution has already been allocated. Once the pool receives new
+            contributions, you can allocate them here.
+          </p>
+        )}
+
         <div>
           <div className="flex items-center justify-between mb-1.5">
             <label htmlFor="allocate-amount" className="text-sm font-medium text-gray-700">
-              Amount
+              Amount to allocate
             </label>
-            {holdingDisplay > 0 && (
+            {hasFundsToAllocate && (
               <button
                 type="button"
                 onClick={handleAllocateMax}
@@ -188,7 +213,11 @@ export function AllocateFundingPoolModal({
             placeholder="0.00"
             type="text"
             inputMode="decimal"
-            className={amountError ? 'border-red-500' : undefined}
+            disabled={!hasFundsToAllocate || isSubmitting}
+            className={cn(
+              amountError && 'border-red-500',
+              !hasFundsToAllocate && 'bg-gray-50 opacity-60'
+            )}
             rightElement={
               <div className="flex items-center gap-1 pr-3 text-gray-900">
                 <span className="font-medium">{currencyLabel}</span>

From e4ffd20004ecdfd14f7f6eb777541b0bb9e53870 Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Tue, 15 Sep 2026 09:05:17 -0400
Subject: [PATCH 5/7] Updating icon set in RFP page

---
 .../WorkHeader/GrantFundingPoolWidget.tsx     |  4 ++--
 .../work/WorkHeader/WorkHeaderGrant.tsx       | 22 ++++++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/work/WorkHeader/GrantFundingPoolWidget.tsx b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
index 94f1c912d..aca9f27f8 100644
--- a/components/work/WorkHeader/GrantFundingPoolWidget.tsx
+++ b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ArrowUpFromLine, Coins, Info } from 'lucide-react';
+import { Coins, FileUp, Info } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Tooltip } from '@/components/ui/Tooltip';
 import { SubmitProposalTooltip } from '@/components/tooltips/SubmitProposalTooltip';
@@ -218,7 +218,7 @@ export function GrantFundingPoolWidget({
               onClick={onApply}
               className="w-full gap-2 max-sm:!h-10 max-sm:!px-4 max-sm:!text-sm"
             >
-              <ArrowUpFromLine className="h-5 w-5 max-sm:!h-4 max-sm:!w-4" />
+              <FileUp className="h-5 w-5 max-sm:!h-4 max-sm:!w-4" />
               Submit proposal
             </Button>
           </SubmitProposalTooltip>
diff --git a/components/work/WorkHeader/WorkHeaderGrant.tsx b/components/work/WorkHeader/WorkHeaderGrant.tsx
index 4907d2dfa..7fc4a1443 100644
--- a/components/work/WorkHeader/WorkHeaderGrant.tsx
+++ b/components/work/WorkHeader/WorkHeaderGrant.tsx
@@ -1,7 +1,10 @@
 'use client';
 
 import { type ReactNode, useState, useCallback } from 'react';
-import { ArrowUpFromLine, Coins, Lock } from 'lucide-react';
+import { Bell, Coins, FileText, FileUp, Lock } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFileSignature } from '@fortawesome/pro-light-svg-icons';
+import { faFileSignature as faFileSignatureSolid } from '@fortawesome/pro-solid-svg-icons';
 import { useRouter } from 'next/navigation';
 import { Work } from '@/types/work';
 import { WorkMetadata } from '@/services/metadata.service';
@@ -119,7 +122,7 @@ export function WorkHeaderGrant({
           className="gap-2 w-full sm:flex-1 max-sm:!text-xs max-sm:!h-8 max-sm:!px-2"
         >
           Submit Proposal
-          <ArrowUpFromLine className="w-4 h-4 sm:w-5 sm:h-5" />
+          <FileUp className="w-4 h-4 sm:w-5 sm:h-5" />
         </Button>
       </SubmitProposalTooltip>
     ) : null;
@@ -180,11 +183,23 @@ export function WorkHeaderGrant({
     activityCount > 0 && activity.hasMore ? `${activityCount}+` : activityCount;
 
   const grantTabs = [
-    { id: 'details' as const, label: 'Details' },
+    {
+      id: 'details' as const,
+      label: (
+        <div className="flex items-center">
+          <FileText className="h-4 w-4 mr-2" />
+          <span>Details</span>
+        </div>
+      ),
+    },
     {
       id: 'proposals' as const,
       label: (
         <div className="flex items-center">
+          <FontAwesomeIcon
+            icon={activeTab === 'proposals' ? faFileSignatureSolid : faFileSignature}
+            className="h-4 w-4 mr-2"
+          />
           <span>Proposals</span>
           {proposalCount > 0 && (
             <span
@@ -204,6 +219,7 @@ export function WorkHeaderGrant({
       id: 'activity' as const,
       label: (
         <div className="flex items-center">
+          <Bell className="h-4 w-4 mr-2" />
           <span>Updates</span>
           {activityCount > 0 && (
             <span

From de4da19a49f9233e053e1ddf36d5719f9033067d Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Tue, 15 Sep 2026 15:47:31 -0400
Subject: [PATCH 6/7] Rendering contributors

---
 components/ui/AvatarStack.tsx                 |  14 +-
 .../WorkHeader/GrantFundingPoolWidget.tsx     | 141 ++++++++++++++----
 types/grant.ts                                |  33 ++++
 3 files changed, 153 insertions(+), 35 deletions(-)

diff --git a/components/ui/AvatarStack.tsx b/components/ui/AvatarStack.tsx
index 34d83c4a2..0c839abdf 100644
--- a/components/ui/AvatarStack.tsx
+++ b/components/ui/AvatarStack.tsx
@@ -38,6 +38,10 @@ interface AvatarStackProps {
   }[];
   /** Label for the extra count tooltip */
   extraCountLabel?: string;
+  /** Overrides the +N avatar's default gray fill, e.g. to tint it to a legend color. */
+  extraCountClassName?: string;
+  /** Overrides the +N avatar's default label color. */
+  extraCountLabelClassName?: string;
   /** When true, shows the label text after avatars */
   showLabel?: boolean;
 }
@@ -55,6 +59,8 @@ export const AvatarStack: FC<AvatarStackProps> = ({
   totalItemsCount,
   allItems,
   extraCountLabel = 'Others',
+  extraCountClassName,
+  extraCountLabelClassName,
   showLabel = true,
 }) => {
   // Determine how many items to display
@@ -190,10 +196,10 @@ export const AvatarStack: FC<AvatarStackProps> = ({
                 src={null}
                 alt={`+${extraCount}`}
                 size={size}
-                className={`${getRingWidth()} ${ringColorClass} bg-gray-100`}
+                className={cn(getRingWidth(), ringColorClass, 'bg-gray-100', extraCountClassName)}
                 disableTooltip
                 label={`+${extraCount}`}
-                labelClassName="font-semibold"
+                labelClassName={cn('font-semibold', extraCountLabelClassName)}
                 labelStyle={{ fontSize: getExtraCountFontSize() }}
               />
             ) : (
@@ -206,10 +212,10 @@ export const AvatarStack: FC<AvatarStackProps> = ({
                   src={null}
                   alt={`+${extraCount}`}
                   size={size}
-                  className={`${getRingWidth()} ${ringColorClass} bg-gray-100`}
+                  className={cn(getRingWidth(), ringColorClass, 'bg-gray-100', extraCountClassName)}
                   disableTooltip
                   label={`+${extraCount}`}
-                  labelClassName="font-semibold"
+                  labelClassName={cn('font-semibold', extraCountLabelClassName)}
                   labelStyle={{ fontSize: getExtraCountFontSize() }}
                 />
               </Tooltip>
diff --git a/components/work/WorkHeader/GrantFundingPoolWidget.tsx b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
index aca9f27f8..66c917fef 100644
--- a/components/work/WorkHeader/GrantFundingPoolWidget.tsx
+++ b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { Coins, FileUp, Info } from 'lucide-react';
+import { Avatar } from '@/components/ui/Avatar';
+import { AvatarStack } from '@/components/ui/AvatarStack';
 import { Button } from '@/components/ui/Button';
 import { Tooltip } from '@/components/ui/Tooltip';
 import { SubmitProposalTooltip } from '@/components/tooltips/SubmitProposalTooltip';
@@ -13,6 +15,12 @@ import { cn } from '@/utils/styles';
 /** A first $100 against a $25K grant is a sliver; floor it so it shows on the bar. */
 const MIN_VISIBLE_PERCENT = 4;
 
+/** Faces shown before the stack collapses into a +N chip. Two is what the legend row fits. */
+const MAX_FACES = 2;
+
+/** Named backers in the hover breakdown, before it gets taller than the card. */
+const MAX_LISTED_BACKERS = 4;
+
 function formatAmount(amount: FundingPoolAmount, showUSD: boolean): string {
   return formatCurrency({
     amount: showUSD ? amount.usd : amount.rsc,
@@ -51,11 +59,17 @@ interface GrantFundingPoolWidgetProps {
 /**
  * One card for both audiences: researchers apply, funders add to the pool.
  * Sized and positioned by its parent to sit directly above the right sidebar.
- * Contribute is the loud CTA — solid primary, since shared links aim at
- * funders — while applying stays a same-size quiet outline, so the two
- * domains never read as one flow. The breakdown is a single fixed-height
- * line so the card matches the title block beside it; the full numbers live
- * in the info tooltip.
+ *
+ * The line under the bar is the bar's legend, one side per funding source:
+ * green for the funder, indigo for the community, whose share is drawn as
+ * backer faces rather than a plain swatch. It sits directly above Add to pool
+ * so the crowd reads as an invitation to join it. The exact split and the named
+ * top backers live in the info tooltip.
+ *
+ * Every row is fixed height so the card stays the height it was before the
+ * contributors landed: 202px with both buttons, 186px on mobile. Padding and
+ * button margins were shaved to pay for the taller avatar row; re-check that
+ * arithmetic before changing any spacing here.
  */
 export function GrantFundingPoolWidget({
   organization,
@@ -92,6 +106,13 @@ export function GrantFundingPoolWidget({
 
   const funderLabel = organization || 'The funder';
 
+  const backerCount = fundingPool.contributors.total;
+  const topBackers = fundingPool.contributors.top;
+  // Feeds ship the pool without contributors, so a pool can have money raised
+  // and no faces to show for it.
+  const hasFaces = backerCount > 0 && topBackers.length > 0;
+  const backerNoun = backerCount === 1 ? 'backer' : 'backers';
+
   const breakdownRow = (label: string, value: string, emphasis = false) => (
     <div className="flex items-center justify-between gap-4">
       <span className={emphasis ? 'text-gray-900' : 'text-gray-500'}>{label}</span>
@@ -106,11 +127,33 @@ export function GrantFundingPoolWidget({
       <p className="text-sm leading-snug text-gray-800">
         Community contributions are pooled and awarded to the strongest proposals by {funderLabel}.
       </p>
+      {hasFaces && (
+        <div className="space-y-1.5 border-t border-gray-200 pt-2">
+          <p className="font-medium text-gray-900">
+            {backerCount > MAX_LISTED_BACKERS
+              ? `Top backers of ${backerCount}`
+              : backerCount === 1
+                ? 'Backer'
+                : 'Backers'}
+          </p>
+          {topBackers.slice(0, MAX_LISTED_BACKERS).map((backer) => (
+            <div key={backer.id} className="flex items-center justify-between gap-3">
+              <span className="flex min-w-0 items-center gap-1.5">
+                <Avatar src={backer.profileImage} alt={backer.fullName} size="xxs" disableTooltip />
+                <span className="truncate text-gray-700">{backer.fullName}</span>
+              </span>
+              <span className="shrink-0 font-mono text-gray-900 tabular-nums">
+                {formatAmount(backer.totalContribution, showUSD)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
       <div className="space-y-1 border-t border-gray-200 pt-2">
         {breakdownRow(funderLabel, formatAmount(grantAmount, showUSD))}
         {breakdownRow('Community', formatAmount(raised, showUSD))}
         {breakdownRow('Allocated to proposals', formatAmount(allocated, showUSD))}
-        {showHolding && breakdownRow('Ready to allocate', formatAmount(holding, showUSD), true)}
+        {showHolding && breakdownRow('Available to allocate', formatAmount(holding, showUSD), true)}
       </div>
     </div>
   );
@@ -124,7 +167,10 @@ export function GrantFundingPoolWidget({
     // page rule.
     <div
       data-testid="grant-funding-pool"
-      className={cn('w-full rounded-lg border border-gray-200 bg-white p-4 shadow-sm', className)}
+      className={cn(
+        'w-full rounded-lg border border-gray-200 bg-white px-4 py-3.5 shadow-sm',
+        className
+      )}
     >
       <div className="flex items-baseline justify-between gap-3">
         <span className="flex items-center gap-1.5 text-sm font-semibold text-gray-900">
@@ -147,7 +193,7 @@ export function GrantFundingPoolWidget({
       </div>
 
       <div
-        className="mt-2 flex h-1.5 w-full overflow-hidden rounded bg-gray-100"
+        className="mt-1.5 flex h-1.5 w-full overflow-hidden rounded-full bg-gray-100"
         role="img"
         aria-label={`${Math.round(100 - rawCommunityPercent)}% from ${funderLabel}, ${Math.round(
           rawCommunityPercent
@@ -158,47 +204,80 @@ export function GrantFundingPoolWidget({
           style={{ width: `${100 - communityPercent}%` }}
         />
         <span
-          className="h-full bg-indigo-400 transition-all duration-300"
+          className="h-full bg-indigo-500 transition-all duration-300"
           style={{ width: `${communityPercent}%` }}
         />
       </div>
 
-      {/* Fixed-width labels ("Funder", "Community") so this line never wraps; the org name is in the subtitle beside it. */}
-      <div className="mt-1.5 flex h-4 items-center gap-3 whitespace-nowrap text-xs text-gray-500">
-        <span className="flex items-center gap-1.5" title={`${funderLabel}, original funder`}>
+      {/* Legend for the bar above: green is the funder, indigo is the community.
+          The backers' side spends its label budget on faces instead of the word
+          — the +N chip carries the indigo, so the pairing still reads — because
+          in RSC the two amounts alone take 123px of the 270px this row gets at
+          the narrowest card width. Fixed h-6, the height of one avatar, so the
+          card never grows as backers arrive. */}
+      <div
+        className="mt-2 flex h-6 items-center justify-between gap-2 text-xs"
+        data-testid="grant-funding-pool-legend"
+      >
+        <span className="flex shrink-0 items-center gap-1.5 text-gray-500">
           <span className="h-2 w-2 shrink-0 rounded-sm bg-green-600" aria-hidden="true" />
           Funder
-          <span className="font-mono text-gray-900 tabular-nums">
+          <span className="font-mono font-semibold text-gray-900 tabular-nums">
             {formatCompact(grantAmount, showUSD)}
           </span>
         </span>
-        {hasCommunityFunding && (
-          <span className="flex items-center gap-1.5" title="Community contributions">
-            <span className="h-2 w-2 rounded-sm bg-indigo-400" aria-hidden="true" />
-            Community
-            <span className="font-mono text-gray-900 tabular-nums">
+
+        <span className="flex min-w-0 items-center gap-2" data-testid="grant-funding-pool-backers">
+          {hasFaces ? (
+            <AvatarStack
+              className="shrink-0"
+              items={topBackers.slice(0, MAX_FACES).map((backer) => ({
+                src: backer.profileImage,
+                alt: backer.fullName,
+                tooltip: backer.fullName,
+                authorId: backer.authorProfileId,
+              }))}
+              size="xs"
+              maxItems={MAX_FACES}
+              spacing={-6}
+              showExtraCount
+              totalItemsCount={backerCount}
+              extraCountLabel={`${backerCount - MAX_FACES} more ${backerNoun}`}
+              extraCountClassName="bg-indigo-500"
+              extraCountLabelClassName="text-white"
+              showLabel={false}
+            />
+          ) : (
+            <span
+              className={cn(
+                'h-2 w-2 shrink-0 rounded-sm',
+                hasCommunityFunding ? 'bg-indigo-500' : 'bg-gray-200'
+              )}
+              aria-hidden="true"
+            />
+          )}
+          {hasCommunityFunding ? (
+            <span className="shrink-0 font-mono font-semibold text-indigo-600 tabular-nums">
               {formatCompact(raised, showUSD)}
             </span>
-          </span>
-        )}
-        {!hasCommunityFunding && !isOpen && (
-          <span className="flex items-center gap-1.5">
-            <span className="h-2 w-2 rounded-sm bg-gray-200" aria-hidden="true" />
-            No community funding
-          </span>
-        )}
+          ) : (
+            <span className="min-w-0 truncate text-gray-500">
+              {isOpen ? 'Be the first to back' : 'No backers'}
+            </span>
+          )}
+        </span>
       </div>
 
-      {/* One loud CTA, one quiet one at the same size: solid-primary contribute
-          carries the card (shared links aim at funders), applying stays an
-          outline. Fill — not color or size — separates the two domains. */}
+      {/* Add to pool carries the card — these links get shared at funders, so it
+          stays the only filled control. Applying is the same size but outlined,
+          so the two domains never read as one flow. */}
       {isOpen && (
         <Button
           data-testid="grant-contribute"
           variant="default"
           size="lg"
           onClick={onContribute}
-          className="mt-2.5 w-full gap-2 max-sm:!h-10 max-sm:!px-4 max-sm:!text-sm"
+          className="mt-2 w-full gap-2 font-semibold shadow-sm max-sm:!h-10 max-sm:!px-4 max-sm:!text-sm"
         >
           <Coins className="h-5 w-5 max-sm:!h-4 max-sm:!w-4" />
           Add to pool
@@ -206,7 +285,7 @@ export function GrantFundingPoolWidget({
       )}
 
       {canApply && (
-        <div className="mt-2">
+        <div className="mt-1.5">
           <SubmitProposalTooltip
             isPrivate={applicationVisibility === 'PRIVATE'}
             wrapperClassName="w-full"
diff --git a/types/grant.ts b/types/grant.ts
index d2872b04e..63c2592d8 100644
--- a/types/grant.ts
+++ b/types/grant.ts
@@ -48,12 +48,27 @@ export interface FundingPoolAmount {
   rsc: number;
 }
 
+/** One community contributor to a funding pool, ranked by total given. */
+export interface FundingPoolContributor {
+  id: number;
+  /** Author profile id, used to link the avatar to the author page. */
+  authorProfileId?: number;
+  fullName: string;
+  profileImage: string;
+  totalContribution: FundingPoolAmount;
+}
+
 export interface FundingPool {
   id: number;
   status: FundingPoolStatus;
   amountHolding: FundingPoolAmount;
   amountDistributed: FundingPoolAmount;
   amountRaised: FundingPoolAmount;
+  /** Top contributors plus the count of everyone who contributed. */
+  contributors: {
+    total: number;
+    top: FundingPoolContributor[];
+  };
 }
 
 function parseFundingPoolAmount(raw: unknown): FundingPoolAmount {
@@ -64,6 +79,19 @@ function parseFundingPoolAmount(raw: unknown): FundingPoolAmount {
   };
 }
 
+function transformFundingPoolContributor(raw: any): FundingPoolContributor {
+  const profile = raw.author_profile ?? {};
+  const firstName = raw.first_name ?? profile.first_name ?? '';
+  const lastName = raw.last_name ?? profile.last_name ?? '';
+  return {
+    id: raw.id,
+    authorProfileId: profile.id ?? undefined,
+    fullName: [firstName, lastName].filter(Boolean).join(' ') || 'Contributor',
+    profileImage: profile.profile_image ?? '',
+    totalContribution: parseFundingPoolAmount(raw.total_contribution),
+  };
+}
+
 export function transformFundingPool(raw: any): FundingPool {
   return {
     id: raw.id,
@@ -71,6 +99,11 @@ export function transformFundingPool(raw: any): FundingPool {
     amountHolding: parseFundingPoolAmount(raw.amount_holding),
     amountDistributed: parseFundingPoolAmount(raw.amount_distributed),
     amountRaised: parseFundingPoolAmount(raw.amount_raised),
+    // Feeds ship the pool without contributors; only the RFP page asks for them.
+    contributors: {
+      total: raw.contributors?.total ?? 0,
+      top: (raw.contributors?.top ?? []).map(transformFundingPoolContributor),
+    },
   };
 }
 

From 9a127f6231bd33f5f17504245324340ad254453d Mon Sep 17 00:00:00 2001
From: Kobe Attias <kobeattias@gmail.com>
Date: Tue, 15 Sep 2026 16:16:05 -0400
Subject: [PATCH 7/7] Adding details about funding pool to funding widget

---
 .../cards/ActivityFundingGroupCard.tsx        |  2 +-
 .../Activity/lib/activityDisplay.utils.ts     |  4 +-
 .../WorkHeader/GrantFundingPoolWidget.tsx     | 82 +++++++++++--------
 .../work/WorkHeader/WorkHeaderGrant.tsx       |  8 ++
 4 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/components/Activity/cards/ActivityFundingGroupCard.tsx b/components/Activity/cards/ActivityFundingGroupCard.tsx
index c77e87e2c..e622e63f2 100644
--- a/components/Activity/cards/ActivityFundingGroupCard.tsx
+++ b/components/Activity/cards/ActivityFundingGroupCard.tsx
@@ -63,7 +63,7 @@ const FunderName: FC<{ funder: AuthorProfile }> = ({ funder }) => {
 const FunderSummary: FC<{ funders: AuthorProfile[]; isRfp: boolean }> = ({ funders, isRfp }) => {
   const named = funders.slice(0, MAX_NAMED_FUNDERS);
   const remaining = funders.length - named.length;
-  const action = isRfp ? ' contributed to RFP' : ' funded this proposal.';
+  const action = isRfp ? ' contributed to the funding pool' : ' funded this proposal.';
 
   return (
     <>
diff --git a/components/Activity/lib/activityDisplay.utils.ts b/components/Activity/lib/activityDisplay.utils.ts
index 6f53ea2cc..5f089c0bb 100644
--- a/components/Activity/lib/activityDisplay.utils.ts
+++ b/components/Activity/lib/activityDisplay.utils.ts
@@ -138,7 +138,9 @@ function getDefaultActivityMessage(entry: FeedEntry): ActivityHeaderMessage {
   if (entry.contentType === 'USDFUNDRAISECONTRIBUTION' || entry.contentType === 'PURCHASE') {
     return {
       actor,
-      verb: isFundingPoolContribution(entry) ? 'contributed to RFP' : 'funded this proposal.',
+      verb: isFundingPoolContribution(entry)
+        ? 'contributed to the funding pool'
+        : 'funded this proposal.',
     };
   }
 
diff --git a/components/work/WorkHeader/GrantFundingPoolWidget.tsx b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
index 66c917fef..ba8d131ae 100644
--- a/components/work/WorkHeader/GrantFundingPoolWidget.tsx
+++ b/components/work/WorkHeader/GrantFundingPoolWidget.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import type { ReactNode } from 'react';
 import { Coins, FileUp, Info } from 'lucide-react';
-import { Avatar } from '@/components/ui/Avatar';
 import { AvatarStack } from '@/components/ui/AvatarStack';
 import { Button } from '@/components/ui/Button';
 import { Tooltip } from '@/components/ui/Tooltip';
@@ -18,7 +18,7 @@ const MIN_VISIBLE_PERCENT = 4;
 /** Faces shown before the stack collapses into a +N chip. Two is what the legend row fits. */
 const MAX_FACES = 2;
 
-/** Named backers in the hover breakdown, before it gets taller than the card. */
+/** Faces in the tooltip's backers row. */
 const MAX_LISTED_BACKERS = 4;
 
 function formatAmount(amount: FundingPoolAmount, showUSD: boolean): string {
@@ -113,45 +113,61 @@ export function GrantFundingPoolWidget({
   const hasFaces = backerCount > 0 && topBackers.length > 0;
   const backerNoun = backerCount === 1 ? 'backer' : 'backers';
 
-  const breakdownRow = (label: string, value: string, emphasis = false) => (
+  const breakdownRow = (label: ReactNode, value: string, emphasis = false) => (
     <div className="flex items-center justify-between gap-4">
-      <span className={emphasis ? 'text-gray-900' : 'text-gray-500'}>{label}</span>
-      <span className={cn('font-mono tabular-nums', emphasis ? 'text-gray-900' : 'text-gray-700')}>
+      <span
+        className={cn(
+          'flex min-w-0 items-center gap-1.5',
+          emphasis ? 'text-gray-900' : 'text-gray-500'
+        )}
+      >
+        {label}
+      </span>
+      <span
+        className={cn(
+          'shrink-0 font-mono tabular-nums',
+          emphasis ? 'text-gray-900' : 'text-gray-700'
+        )}
+      >
         {value}
       </span>
     </div>
   );
 
-  const breakdown = (
-    <div className="space-y-2 text-left text-xs">
-      <p className="text-sm leading-snug text-gray-800">
-        Community contributions are pooled and awarded to the strongest proposals by {funderLabel}.
-      </p>
+  // The backers row carries their faces so the community share reads as
+  // people, not a line item. Only the top few are shown; the count is the label.
+  const backersLabel = (
+    <>
       {hasFaces && (
-        <div className="space-y-1.5 border-t border-gray-200 pt-2">
-          <p className="font-medium text-gray-900">
-            {backerCount > MAX_LISTED_BACKERS
-              ? `Top backers of ${backerCount}`
-              : backerCount === 1
-                ? 'Backer'
-                : 'Backers'}
-          </p>
-          {topBackers.slice(0, MAX_LISTED_BACKERS).map((backer) => (
-            <div key={backer.id} className="flex items-center justify-between gap-3">
-              <span className="flex min-w-0 items-center gap-1.5">
-                <Avatar src={backer.profileImage} alt={backer.fullName} size="xxs" disableTooltip />
-                <span className="truncate text-gray-700">{backer.fullName}</span>
-              </span>
-              <span className="shrink-0 font-mono text-gray-900 tabular-nums">
-                {formatAmount(backer.totalContribution, showUSD)}
-              </span>
-            </div>
-          ))}
-        </div>
+        <AvatarStack
+          className="shrink-0"
+          items={topBackers.slice(0, MAX_LISTED_BACKERS).map((backer) => ({
+            src: backer.profileImage,
+            alt: backer.fullName,
+            authorId: backer.authorProfileId,
+          }))}
+          size="xxs"
+          maxItems={MAX_LISTED_BACKERS}
+          spacing={-4}
+          showExtraCount={false}
+          showLabel={false}
+          disableTooltip
+        />
       )}
-      <div className="space-y-1 border-t border-gray-200 pt-2">
+      <span className="truncate">
+        {backerCount > 0 ? `${backerCount} ${backerNoun}` : 'Backers'}
+      </span>
+    </>
+  );
+
+  // Leads with the two sources that make up the bar, then where the money has gone.
+  const breakdown = (
+    <div className="space-y-2 text-left text-xs">
+      <div className="space-y-1.5">
         {breakdownRow(funderLabel, formatAmount(grantAmount, showUSD))}
-        {breakdownRow('Community', formatAmount(raised, showUSD))}
+        {breakdownRow(backersLabel, formatAmount(raised, showUSD))}
+      </div>
+      <div className="space-y-1 border-t border-gray-200 pt-2">
         {breakdownRow('Allocated to proposals', formatAmount(allocated, showUSD))}
         {showHolding && breakdownRow('Available to allocate', formatAmount(holding, showUSD), true)}
       </div>
@@ -262,7 +278,7 @@ export function GrantFundingPoolWidget({
             </span>
           ) : (
             <span className="min-w-0 truncate text-gray-500">
-              {isOpen ? 'Be the first to back' : 'No backers'}
+              {isOpen ? 'Be the first backer' : 'No backers'}
             </span>
           )}
         </span>
diff --git a/components/work/WorkHeader/WorkHeaderGrant.tsx b/components/work/WorkHeader/WorkHeaderGrant.tsx
index 7fc4a1443..dace2d839 100644
--- a/components/work/WorkHeader/WorkHeaderGrant.tsx
+++ b/components/work/WorkHeader/WorkHeaderGrant.tsx
@@ -153,6 +153,14 @@ export function WorkHeaderGrant({
           onApply={() => setIsApplyModalOpen(true)}
           onContribute={() => setIsContributeModalOpen(true)}
         />
+        {isPoolOpen && (
+          <p
+            className="mt-2 px-1 text-center text-xs leading-snug text-gray-500"
+            data-testid="grant-funding-pool-value-line"
+          >
+            Every dollar you add goes to the proposals. {organization || 'the funder'} picks.
+          </p>
+        )}
       </div>
     );
   } else if (grantId && isActive) {