feat(aih): enhance recommendations component with progress tracking a…

…nd user session handling

- Integrated progress tracking for lessons, allowing users to mark resources as completed.
- Included a login prompt for users to save their progress if not authenticated.

apps/ai-hero/src/app/(content)/[post]/_components/recommendations.tsx

@@ -1,12 +1,16 @@
 'use client'
 
 import Link from 'next/link'
+import { setProgressForResource } from '@/lib/progress'
 import { api } from '@/trpc/react'
 import { cn } from '@/utils/cn'
 import { ArrowRight } from 'lucide-react'
+import { useSession } from 'next-auth/react'
 
 import { Button, Skeleton } from '@coursebuilder/ui'
 
+import { useProgress } from './progress-provider'
+
 export default function Recommendations({
 	postId,
 	className,
@@ -22,7 +26,11 @@ export default function Recommendations({
 			refetchOnWindowFocus: false,
 		},
 	)
-
+	const { progress, addLessonProgress } = useProgress()
+	const { data: session } = useSession()
+	const isCompleted = progress?.completedLessons.some(
+		(lesson) => lesson.resourceId === postId,
+	)
 	if (!post && status !== 'pending') return null
 
 	return (
@@ -36,19 +44,40 @@ export default function Recommendations({
 			<h2 className="fluid-2xl mb-3 font-semibold">Recommended Next</h2>
 			<ul className="w-full">
 				<li className="flex w-full flex-col">
-					<Button
-						className="text-primary flex w-full items-center gap-2 text-lg lg:text-xl"
-						asChild
-						variant="link"
-					>
-						{status === 'pending' ? (
-							<Skeleton className="mx-auto mt-2 flex h-8 w-full max-w-sm" />
-						) : post ? (
+					{status === 'pending' ? (
+						<Skeleton className="mx-auto mt-2 flex h-8 w-full max-w-sm" />
+					) : post ? (
+						<Button
+							className="text-primary flex w-full items-center gap-2 text-lg lg:text-xl"
+							asChild
+							variant="link"
+							onClick={async () => {
+								if (!isCompleted) {
+									addLessonProgress(postId)
+									await setProgressForResource({
+										resourceId: postId,
+										isCompleted: true,
+									})
+								}
+							}}
+						>
 							<Link href={`/${post.slug}`}>
 								{post.title} <ArrowRight className="w-4" />
 							</Link>
-						) : null}
-					</Button>
+						</Button>
+					) : null}
+					{!session?.user && (
+						<span className="text-muted-foreground mt-4">
+							<Link
+								href="/login"
+								target="_blank"
+								className="hover:text-foreground text-center underline"
+							>
+								Log in
+							</Link>{' '}
+							to save progress
+						</span>
+					)}
 				</li>
 			</ul>
 		</nav>