feat(donation-alert): add DonationAlert component to encourage user donations

feat(workout-session-sets): integrate DonationAlert component into WorkoutSessionSets for visibility on donation support

src/components/ui/donation-alert.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Link from "next/link";
+
+import { cn } from "@/shared/lib/utils";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+interface DonationAlertProps {
+  className?: string;
+}
+
+export const DonationAlert = ({ className }: DonationAlertProps) => {
+  return (
+    <Alert
+      className={cn(
+        "flex items-center bg-gray-300 border-gray-400 text-gray-800 dark:bg-slate-600 dark:border-slate-500 dark:text-slate-200",
+        className,
+      )}
+      variant="info"
+    >
+      <AlertDescription className="flex items-center gap-1 italic text-base">
+        <span className="whitespace-pre-line">
+          Keep Workout.cool free. Support us by making a{" "}
+          <Link
+            className="font-medium text-gray-900 underline hover:text-gray-700 dark:text-gray-200"
+            href="https://ko-fi.com/workoutcool"
+            target="_blank"
+          >
+            donation
+          </Link>
+          .
+        </span>
+      </AlertDescription>
+    </Alert>
+  );
+};

src/features/workout-session/ui/workout-session-sets.tsx

@@ -12,6 +12,7 @@ import { cn } from "@/shared/lib/utils";
 import { useWorkoutSession } from "@/features/workout-session/model/use-workout-session";
 import { useSyncWorkoutSessions } from "@/features/workout-session/model/use-sync-workout-sessions";
 import { ExerciseVideoModal } from "@/features/workout-builder/ui/exercise-video-modal";
+import { DonationAlert } from "@/components/ui/donation-alert";
 import { Button } from "@/components/ui/button";
 
 import { WorkoutSessionSet } from "./workout-session-set";
@@ -119,6 +120,9 @@ export function WorkoutSessionSets({
 
   return (
     <div className="w-full max-w-3xl mx-auto pb-8 px-3 sm:px-6">
+      <div className="mb-6">
+        <DonationAlert />
+      </div>
       <ol className="relative border-l-2 ml-2 border-slate-200 dark:border-slate-700">
         {session.exercises.map((ex, idx) => {
           const allSetsCompleted = ex.sets.length > 0 && ex.sets.every((set) => set.completed);