feat(problem-description): add dynamic title to footer and fetch problem title

src/app/(app)/problems/[id]/@problem/@description/layout.tsx

@@ -1,16 +1,30 @@
 import ProblemDescriptionFooter from "@/features/playground/problem/description/footer";
+import prisma from "@/lib/prisma";
 
 interface ProblemDescriptionLayoutProps {
+  params: Promise<{ id: string }>;
   children: React.ReactNode;
 }
 
-export default function ProblemDescriptionLayout({
+export default async function ProblemDescriptionLayout({
+  params,
   children,
 }: ProblemDescriptionLayoutProps) {
+  const { id } = await params;
+
+  const problem = await prisma.problem.findUnique({
+    where: { id: parseInt(id) },
+    select: {
+      title: true,
+    }
+  });
+
+  const title = problem?.title ?? "";
+
   return (
     <div className="h-full flex flex-col">
       <div className="flex-1">{children}</div>
-      <ProblemDescriptionFooter />
+      <ProblemDescriptionFooter title={title} />
     </div>
   );
 }

src/features/playground/problem/description/footer.tsx

@@ -1,10 +1,12 @@
 import { cn } from "@/lib/utils";
 
 interface ProblemDescriptionFooterProps {
+  title: string;
   className?: string;
 }
 
 export default function ProblemDescriptionFooter({
+  title,
   className,
   ...props
 }: ProblemDescriptionFooterProps) {
@@ -14,7 +16,7 @@ export default function ProblemDescriptionFooter({
       className={cn("h-9 flex flex-none items-center bg-muted px-3 py-2", className)}
     >
       <div className="w-full flex items-center justify-center">
-        <span className="truncate">Description of Two Sum</span>
+        <span className="truncate">Description of {title}</span>
       </div>
     </footer>
   );