feat(web): integrate PocketBase authentication with LoginPopup in header

web/src/components/header.tsx

@@ -7,16 +7,26 @@ import { IconSubmissionForm } from "@/components/icon-submission-form"
 import { ThemeSwitcher } from "@/components/theme-switcher"
 import { REPO_PATH } from "@/constants"
 import { getIconsArray } from "@/lib/api"
+import { pb } from "@/lib/pb"
 import type { IconWithName } from "@/types/icons"
 import { CommandMenu } from "./command-menu"
 import { HeaderNav } from "./header-nav"
 import { Button } from "./ui/button"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
+import { LoginPopup } from "./user-button"
+
+interface UserData {
+	username: string
+	email: string
+	avatar?: string
+}
 
 export function Header() {
 	const [iconsData, setIconsData] = useState<IconWithName[]>([])
 	const [isLoaded, setIsLoaded] = useState(false)
 	const [commandMenuOpen, setCommandMenuOpen] = useState(false)
+	const [isLoggedIn, setIsLoggedIn] = useState(false)
+	const [userData, setUserData] = useState<UserData | undefined>(undefined)
 
 	useEffect(() => {
 		async function loadIcons() {
@@ -33,17 +43,59 @@ export function Header() {
 		loadIcons()
 	}, [])
 
+	useEffect(() => {
+		// Initialize auth state from PocketBase authStore
+		const updateAuthState = () => {
+			if (pb.authStore.isValid && pb.authStore.record) {
+				setIsLoggedIn(true)
+				setUserData({
+					username: pb.authStore.record.username || pb.authStore.record.email,
+					email: pb.authStore.record.email,
+					avatar: pb.authStore.record.avatar
+						? `${pb.baseURL}/api/files/_pb_users_auth_/${pb.authStore.record.id}/${pb.authStore.record.avatar}`
+						: undefined,
+				})
+			} else {
+				setIsLoggedIn(false)
+				setUserData(undefined)
+			}
+		}
+
+		// Set initial state
+		updateAuthState()
+
+		// Listen for auth changes
+		const unsubscribe = pb.authStore.onChange(() => {
+			updateAuthState()
+		})
+
+		// Cleanup listener on unmount
+		return () => {
+			unsubscribe()
+		}
+	}, [])
+
 	// Function to open the command menu
 	const openCommandMenu = () => {
 		setCommandMenuOpen(true)
 	}
 
+	// Handle sign out using PocketBase
+	const handleSignOut = () => {
+		pb.authStore.clear()
+	}
+
 	return (
 		<header className="border-b sticky top-0 z-50 backdrop-blur-2xl bg-background/50 border-border/50">
 			<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18">
 				<div className="flex items-center gap-2 md:gap-6">
-					<Link href="/" className="text-lg md:text-xl font-bold group hidden md:block">
-						<span className="transition-colors duration-300 group-hover:">Dashboard Icons</span>
+					<Link
+						href="/"
+						className="text-lg md:text-xl font-bold group hidden md:block"
+					>
+						<span className="transition-colors duration-300 group-hover:">
+							Dashboard Icons
+						</span>
 					</Link>
 					<div className="flex-nowrap">
 						<HeaderNav />
@@ -52,7 +104,11 @@ export function Header() {
 				<div className="flex items-center gap-2 md:gap-4">
 					{/* Desktop search button */}
 					<div className="hidden md:block">
-						<Button variant="outline" className="gap-2 cursor-pointer   transition-all duration-300" onClick={openCommandMenu}>
+						<Button
+							variant="outline"
+							className="gap-2 cursor-pointer   transition-all duration-300"
+							onClick={openCommandMenu}
+						>
 							<Search className="h-4 w-4 transition-all duration-300" />
 							<span>Find icons</span>
 							<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
@@ -78,7 +134,11 @@ export function Header() {
 					<div className="md:hidden">
 						<IconSubmissionForm
 							trigger={
-								<Button variant="ghost" size="icon" className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 ">
+								<Button
+									variant="ghost"
+									size="icon"
+									className="rounded-lg cursor-pointer transition-all duration-300 hover:ring-2 "
+								>
 									<PlusCircle className="h-5 w-5 transition-all duration-300" />
 									<span className="sr-only">Submit icon(s)</span>
 								</Button>
@@ -111,11 +171,22 @@ export function Header() {
 						</TooltipProvider>
 					</div>
 					<ThemeSwitcher />
+					<LoginPopup
+              isLoggedIn={isLoggedIn}
+              userData={isLoggedIn ? userData : undefined}
+              onSignOut={handleSignOut}
+            />
 				</div>
 			</div>
 
 			{/* Single instance of CommandMenu */}
-			{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />}
+			{isLoaded && (
+				<CommandMenu
+					icons={iconsData}
+					open={commandMenuOpen}
+					onOpenChange={setCommandMenuOpen}
+				/>
+			)}
 		</header>
-	)
+	);
 }