Add Dialog for user sign-in and support callback URL

Replaced Link with Dialog for user sign-in to enhance UX. Implemented URL parameter parsing in `UserAuthForm` to support dynamic callback URLs.

components/user/user-auth-form.tsx

@@ -24,6 +24,16 @@ export function UserAuthForm({
   if (!callbackUrl) {
     callbackUrl = "/dashboard"
   }
+
+    // Check for callbackUrl in the URL
+    React.useEffect(() => {
+      const urlParams = new URLSearchParams(window.location.search)
+      const urlCallbackUrl = urlParams.get('callbackUrl')
+      if (urlCallbackUrl) {
+        callbackUrl = urlCallbackUrl
+      }
+    }, [])
+
   const handleEmailSignIn = async () => {
     setIsEmailLoading(true)
     setIsLoading(true)

components/user/user-nav-display.tsx

@@ -1,27 +1,36 @@
-import React from "react"
-import Link from "next/link"
-import { NavItem } from "@/types"
+import React, { useState } from "react"
 import { User } from "next-auth"
-
+import { NavItem } from "@/types"
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
-
 import { UserAccountNav } from "./user-account-nav"
+import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog"
+import { UserAuthForm } from "@/components/user/user-auth-form"
+import {VisuallyHidden} from "@radix-ui/themes";
 
 interface UserNavDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
   user: Pick<User, "name" | "image" | "email">
   avatarNavItems?: NavItem[]
 }
 
 export function UserNavDisplay({ user, avatarNavItems }: UserNavDisplayProps) {
+  const [open, setOpen] = useState(false)
+
   if (user.email === null || user.email === undefined) {
     return (
-      <Link
-        href="/signin"
-        className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
-      >
-        Sign in
-      </Link>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <button className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
+            Sign in
+          </button>
+        </DialogTrigger>
+        <DialogContent>
+          <VisuallyHidden>
+            <DialogTitle>Sign In</DialogTitle>
+          </VisuallyHidden>
+          <UserAuthForm callbackUrl={window.location.href} />
+        </DialogContent>
+      </Dialog>
     )
   }
 
@@ -35,4 +44,4 @@ export function UserNavDisplay({ user, avatarNavItems }: UserNavDisplayProps) {
       avatarNavItems={avatarNavItems}
     />
   )
-}
+}