feat: Implement automatic MFA verification modal

src/components/admin/AdminPageLayout.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useCallback } from 'react';
 import { AdminLayout } from '@/components/layout/AdminLayout';
-import { MFARequiredAlert } from '@/components/auth/MFARequiredAlert';
+import { MFAGuard } from '@/components/auth/MFAGuard';
 import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
 import { useAdminGuard } from '@/hooks/useAdminGuard';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -104,15 +104,6 @@ export function AdminPageLayout({
     return null;
   }
 
-  // MFA required
-  if (needsMFA) {
-    return (
-      <AdminLayout>
-        <MFARequiredAlert />
-      </AdminLayout>
-    );
-  }
-
   // Main content
   return (
     <AdminLayout
@@ -121,13 +112,15 @@ export function AdminPageLayout({
       pollInterval={showRefreshControls ? pollInterval : undefined}
       lastUpdated={showRefreshControls ? (lastUpdated as Date) : undefined}
     >
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
-          <p className="text-muted-foreground mt-1">{description}</p>
+      <MFAGuard>
+        <div className="space-y-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+            <p className="text-muted-foreground mt-1">{description}</p>
+          </div>
+          {children}
         </div>
-        {children}
-      </div>
+      </MFAGuard>
     </AdminLayout>
   );
 }