feat(locales): update open source description to clarify the app is ads-free

feat(donation-modal): integrate Ko-fi iframe for donations and add theme support for better user experience

locales/en.ts

@@ -108,7 +108,7 @@ export default {
     costs_description: "Currently, donations don't even cover basic costs: servers, authentication, infrastructure, database, etc.",
     open_source_title: "100% Open Source",
     open_source_description:
-      "This app is completely free and open source. No profit is generated - it's a passion project to help the community and help people exercise.",
+      "This app is completely free, ads free and open source. No profit is generated - it's a passion project to help the community and help people exercise.",
     no_ads: "No ads",
     no_tracking: "No tracking",
     impact_title: "Your impact",

src/features/workout-session/ui/donation-modal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { useTheme } from "next-themes";
 import { Heart, X, Code, Server, Coffee, Github } from "lucide-react";
 
 import { useI18n } from "locales/client";
@@ -14,6 +15,7 @@ interface DonationModalProps {
 export function DonationModal({ isOpen, onClose }: DonationModalProps) {
   const t = useI18n();
   const modalRef = useRef<HTMLDialogElement>(null);
+  const theme = useTheme();
 
   useEffect(() => {
     const modal = modalRef.current;
@@ -112,6 +114,14 @@ export function DonationModal({ isOpen, onClose }: DonationModalProps) {
             </ul>
             <p className="text-xs text-center text-green-700 dark:text-green-400 mt-2 font-medium">{t("donation_modal.impact_footer")}</p>
           </div>
+
+          <iframe
+            height="700"
+            id="kofiframe"
+            src="https://ko-fi.com/workoutcool/?hidefeed=true&widget=true&embed=true&preview=true"
+            style={{ border: "none", width: "100%", padding: "4px" }}
+            title="workoutcool"
+          ></iframe>
         </div>
 
         {/* Actions */}