Moved things and added title extraction

2025-06-27 14:30:39 +02:00
parent 50cc087bed
commit e4c382a4dc
18 changed files with 43 additions and 13 deletions
--- a/src/components/user-dropdown.tsx
+++ b/src/components/user-dropdown.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu"
+import { signOut, useSession } from "@/lib/auth/auth-client"
+import { LogOut, Settings } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+
+interface UserDropdownProps {
+    className?: string
+}
+
+export function UserDropdown({ className }: UserDropdownProps) {
+    const { data: session, isPending } = useSession()
+    const router = useRouter()
+
+    const handleSignOut = async () => {
+        try {
+            await signOut({
+                fetchOptions: {
+                    onSuccess: () => {
+                        router.push("/")
+                    }
+                }
+            })
+        } catch (err) {
+            console.error("Failed to sign out:", err)
+        }
+    }
+
+    if (isPending) {
+        return (
+            <Button variant="outline" disabled className={className}>
+                Loading...
+            </Button>
+        )
+    }
+
+    if (!session?.user) {
+        return (
+            <Button asChild className={className}>
+                <Link href="/sign-in">
+                    Sign in
+                </Link>
+            </Button>
+        )
+    }
+
+    const user = session.user
+    const userInitials = user.name
+        ? user.name.split(" ").map(n => n[0]).join("").toUpperCase()
+        : user.email?.[0]?.toUpperCase() || "U"
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                    <Avatar className="h-8 w-8">
+                        <AvatarImage src={user.image || undefined} alt={user.name || "User"} />
+                        <AvatarFallback>{userInitials}</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end" forceMount>
+                <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                        <p className="text-sm font-medium leading-none">
+                            {user.name || "User"}
+                        </p>
+                        <p className="text-xs leading-none text-muted-foreground">
+                            {user.email}
+                        </p>
+                    </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                    <Link href="/dashboard">
+                        <Settings className="mr-2 h-4 w-4" />
+                        <span>Dashboard</span>
+                    </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={handleSignOut}>
+                    <LogOut className="mr-2 h-4 w-4" />
+                    <span>Log out</span>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}