feat: enhance Header component to display user initials and refactor ThemeSwitcher for improved button handling

src/app/components/Header/index.tsx

@@ -12,9 +12,25 @@ import {
 import { useSession } from "next-auth/react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 
+const getInitials = (name: string) => {
+	if (!name) return "";
+
+	const nameParts = name.split(" ");
+	if (nameParts.length === 1) {
+		return name;
+	}
+
+	const firstInitial = nameParts[0]?.[0] || "";
+	const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || "";
+
+	return firstInitial + secondInitial;
+};
+
 export const Header = () => {
 	const { data: session } = useSession();
 
+	const initials = session?.user?.name ? getInitials(session.user.name) : "";
+
 	return (
 		<Navbar className="mb-2">
 			<NavbarBrand>
@@ -29,7 +45,7 @@ export const Header = () => {
 							as="button"
 							className="transition-transform"
 							color="secondary"
-							name={session?.user?.name}
+							name={initials}
 							size="sm"
 						/>
 					</DropdownTrigger>

src/app/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -13,11 +13,12 @@ export const ThemeSwitcher = () => {
 	if (!mounted) return null;
 
 	return (
-		<div className={`fixed bottom-4 right-4 rounded-lg ${theme === "light" ? "bg-black" : "bg-white"} p-2`}>
-			{theme === "light" ? (
-				<button onClick={() => setTheme("dark")}>🌙</button>) : (
-				<button onClick={() => setTheme("light")}>☀️</button>
-			)}
-		</div>
+		<button
+			className={`fixed bottom-4 right-4 rounded-lg ${theme === "light" ? "bg-black" : "bg-white"
+				} p-2`}
+			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+		>
+			{theme === "light" ? "🌙" : "☀️"}
+		</button>
 	);
 };