Refactor code structure for improved readability and maintainability

app/layout.tsx

@@ -3,8 +3,10 @@ import { Be_Vietnam_Pro } from 'next/font/google'
 import { ThemeProvider } from '@/components/theme-provider'
 import { AuthProvider } from '@/lib/auth-context'
 import { BookmarkProvider } from '@/lib/bookmark-context'
+import { RecommendationProvider } from '@/lib/recommendation-context'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
+import { Toaster } from 'sonner'
 import './globals.css'
 
 const beVietnam = Be_Vietnam_Pro({
@@ -54,14 +56,17 @@ export default function RootLayout({
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
           <AuthProvider>
             <BookmarkProvider>
-              <div className="flex min-h-svh flex-col">
-                <Header />
-                <main className="flex-1">{children}</main>
-                <Footer />
-              </div>
+              <RecommendationProvider>
+                <div className="flex min-h-svh flex-col">
+                  <Header />
+                  <main className="flex-1">{children}</main>
+                  <Footer />
+                </div>
+              </RecommendationProvider>
             </BookmarkProvider>
           </AuthProvider>
         </ThemeProvider>
+        <Toaster richColors position="top-right" />
       </body>
     </html>
   )