feat: ko-fi integration for credit purchases

frontend/src/app/dashboard/page.tsx

@@ -2,6 +2,7 @@
 
 import {
 	Activity,
+	Coffee,
 	Egg,
 	ExternalLink,
 	History,
@@ -19,6 +20,7 @@ import { api, authApi, overseerApi, userApi } from "@/lib/api";
 import { useStore } from "@/lib/store";
 import { formatNumber } from "@/lib/utils";
 import { ActivityFeed } from "./components/ActivityFeed";
+import { BuyCreditsModal } from "./components/BuyCreditsModal";
 import { Leaderboard } from "./components/Leaderboard";
 import { RequestHistory } from "./components/RequestHistory";
 import { SearchRequestModal } from "./components/SearchRequestModal";
@@ -38,6 +40,7 @@ export default function DashboardPage() {
 	const [pendingRequests, setPendingRequests] = useState<any[]>([]);
 	const [isLoading, setIsLoading] = useState(true);
 	const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+	const [isBuyModalOpen, setIsBuyModalOpen] = useState(false);
 
 	useEffect(() => {
 		if (!isAuthenticated) {
@@ -122,6 +125,14 @@ export default function DashboardPage() {
 							<Search className="mr-2 h-5 w-5" />
 							PECK FOR FEED
 						</Button>
+						<Button
+							variant="outline"
+							onClick={() => setIsBuyModalOpen(true)}
+							className="rounded-full border-2 border-[#FF5E5B] bg-background font-bold text-[#FF5E5B] hover:bg-[#FF5E5B]/10"
+						>
+							<Coffee className="mr-2 h-5 w-5" />
+							BUY FEED
+						</Button>
 						<Button
 							variant="outline"
 							onClick={handleRefresh}
@@ -258,6 +269,7 @@ export default function DashboardPage() {
 				onOpenChange={setIsSearchModalOpen}
 				costs={requestCosts}
 			/>
+			<BuyCreditsModal open={isBuyModalOpen} onOpenChange={setIsBuyModalOpen} />
 		</div>
 	);
 }