Fix admin sidebar favicon

src/components/auth/MFAChallenge.tsx

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useState } from "react";
-import { supabase } from '@/integrations/supabase/client';
+import { supabase } from "@/integrations/supabase/client";
-import { useToast } from '@/hooks/use-toast';
+import { useToast } from "@/hooks/use-toast";
-import { getErrorMessage } from '@/lib/errorHandler';
+import { getErrorMessage } from "@/lib/errorHandler";
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { Label } from '@/components/ui/label';
+import { Label } from "@/components/ui/label";
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
-import { Shield } from 'lucide-react';
+import { Shield } from "lucide-react";
 
 interface MFAChallengeProps {
   factorId: string;
@@ -15,7 +15,7 @@ interface MFAChallengeProps {
 
 export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProps) {
   const { toast } = useToast();
-  const [code, setCode] = useState('');
+  const [code, setCode] = useState("");
   const [loading, setLoading] = useState(false);
 
   const handleVerify = async () => {
@@ -24,8 +24,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
     setLoading(true);
     try {
       // Create fresh challenge for each verification attempt
-      const { data: challengeData, error: challengeError } = 
+      const { data: challengeData, error: challengeError } = await supabase.auth.mfa.challenge({ factorId });
-        await supabase.auth.mfa.challenge({ factorId });
 
       if (challengeError) throw challengeError;
 
@@ -33,7 +32,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
       const { data, error } = await supabase.auth.mfa.verify({
         factorId,
         challengeId: challengeData.id,
-        code: code.trim()
+        code: code.trim(),
       });
 
       if (error) throw error;
@@ -41,7 +40,7 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
       if (data) {
         toast({
           title: "Welcome back!",
-          description: "MFA verification successful."
+          description: "Multi-Factor verification successful.",
         });
         onSuccess();
       }
@@ -49,9 +48,9 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
       toast({
         variant: "destructive",
         title: "Verification Failed",
-        description: getErrorMessage(error) || "Invalid code. Please try again."
+        description: getErrorMessage(error) || "Invalid code. Please try again.",
       });
-      setCode('');
+      setCode("");
     } finally {
       setLoading(false);
     }
@@ -64,19 +63,12 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
         <h3 className="font-semibold">Multi-Factor Authentication</h3>
       </div>
 
-      <p className="text-sm text-muted-foreground">
+      <p className="text-sm text-muted-foreground">Enter the 6-digit code from your authenticator app</p>
-        Enter the 6-digit code from your authenticator app
-      </p>
 
       <div className="space-y-2">
         <Label htmlFor="mfa-code">Authentication Code</Label>
         <div className="flex justify-center">
-          <InputOTP
+          <InputOTP maxLength={6} value={code} onChange={setCode} onComplete={handleVerify}>
-            maxLength={6}
-            value={code}
-            onChange={setCode}
-            onComplete={handleVerify}
-          >
             <InputOTPGroup>
               <InputOTPSlot index={0} />
               <InputOTPSlot index={1} />
@@ -90,19 +82,10 @@ export function MFAChallenge({ factorId, onSuccess, onCancel }: MFAChallengeProp
       </div>
 
       <div className="flex gap-2">
-        <Button
+        <Button variant="outline" onClick={onCancel} className="flex-1" disabled={loading}>
-          variant="outline"
-          onClick={onCancel}
-          className="flex-1"
-          disabled={loading}
-        >
           Cancel
         </Button>
-        <Button
+        <Button onClick={handleVerify} className="flex-1" disabled={code.length !== 6 || loading}>
-          onClick={handleVerify}
-          className="flex-1"
-          disabled={code.length !== 6 || loading}
-        >
           {loading ? "Verifying..." : "Verify"}
         </Button>
       </div>

src/components/layout/AdminSidebar.tsx

@@ -72,28 +72,36 @@ export function AdminSidebar() {
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader className="border-b border-border/40 px-4 py-4">
-        {!collapsed && (
+        <div className="flex items-center gap-2 min-h-[32px]">
-          <div className="flex items-center gap-2">
+          <div className="flex items-center justify-center flex-shrink-0">
             <img 
-              src="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon128" 
+              src="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon512" 
               alt="ThrillWiki" 
-              className="w-8 h-8"
+              width="32"
+              height="32"
+              loading="eager"
+              decoding="async"
+              draggable="false"
+              className={`
+                object-contain
+                transition-all duration-200 ease-in-out
+                ${collapsed ? 'w-6 h-6' : 'w-8 h-8'}
+              `}
+              onError={(e) => {
+                const img = e.target as HTMLImageElement;
+                if (!img.src.includes('favicon128')) {
+                  img.src = 'https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon128';
+                }
+              }}
             />
-            <div className="flex flex-col">
+          </div>
-              <span className="text-sm font-semibold">ThrillWiki</span>
+          {!collapsed && (
-              <span className="text-xs text-muted-foreground">Admin Panel</span>
+            <div className="flex flex-col overflow-hidden">
+              <span className="text-sm font-semibold truncate">ThrillWiki</span>
+              <span className="text-xs text-muted-foreground truncate">Admin Panel</span>
             </div>
-          </div>
+          )}
-        )}
+        </div>
-        {collapsed && (
-          <div className="flex items-center justify-center">
-            <img 
-              src="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon128" 
-              alt="ThrillWiki" 
-              className="w-6 h-6"
-            />
-          </div>
-        )}
       </SidebarHeader>
 
       <SidebarContent>