fix(ui): add error handling and loading state to sign-in

Add try/catch with toast notification and loading state for sign-in
button to improve UX and error visibility.

src/app/auth/signin/page.tsx

@@ -5,11 +5,13 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
 
 export default function SignInPage() {
   const { data: session, isPending } = useSession()
   const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     if (session?.user) {
@@ -18,10 +20,17 @@ export default function SignInPage() {
   }, [session, router])
 
   const handleSignIn = async () => {
+    setIsLoading(true)
+    try {
       await signIn.oauth2({
         providerId: "authentik",
         callbackURL: "/",
       })
+    } catch (error) {
+      toast.error("Failed to sign in. Please try again.")
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   if (isPending) {
@@ -42,8 +51,8 @@ export default function SignInPage() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <Button onClick={handleSignIn} className="w-full" size="lg">
+          <Button onClick={handleSignIn} className="w-full" size="lg" disabled={isLoading}>
-            Continue with Authentik
+            {isLoading ? "Signing in..." : "Continue with Authentik"}
           </Button>
 
           <div className="text-center">