sticky top navigation & user data in user nav

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -26,8 +26,8 @@ export function DashboardClientLayout({
 				navMain={navMain}
 			/>
 			<SidebarInset>
-				<header className="flex h-16 shrink-0 items-center gap-2">
+				<header className="sticky top-0 z-50 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
-					<div className="flex items-center gap-2 px-4">
+					<div className="flex items-center justify-between w-full gap-2 px-4">
 						<SidebarTrigger className="-ml-1" />
 						<Separator orientation="vertical" className="h-6" />
 						<ThemeTogglerComponent />

surfsense_web/components/sidebar/app-sidebar.tsx

@@ -181,7 +181,6 @@ export const AppSidebar = memo(function AppSidebar({
 	navMain = defaultData.navMain,
 	navSecondary = defaultData.navSecondary,
 	RecentChats = defaultData.RecentChats,
-	user = defaultData.user,
 	...props
 }: AppSidebarProps) {
 	// Process navMain to resolve icon names to components
@@ -243,7 +242,7 @@ export const AppSidebar = memo(function AppSidebar({
 				<NavSecondary items={processedNavSecondary} className="mt-auto" />
 
 				{/* User Profile Section */}
-				<NavUser user={user} />
+				<NavUser />
 			</SidebarFooter>
 		</Sidebar>
 	);

surfsense_web/components/sidebar/nav-user.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { BadgeCheck, ChevronsUpDown, LogOut, Settings, User } from "lucide-react";
+import { BadgeCheck, ChevronsUpDown, LogOut, Settings, User as UserIcon } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
-import { memo, useCallback } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
 	DropdownMenu,
@@ -20,6 +20,15 @@ import {
 	SidebarMenuItem,
 	useSidebar,
 } from "@/components/ui/sidebar";
+import { apiClient } from "@/lib/api";
+
+interface User {
+	id: string;
+	email: string;
+	is_active: boolean;
+	is_superuser: boolean;
+	is_verified: boolean;
+}
 
 interface UserData {
 	name: string;
@@ -28,11 +37,50 @@ interface UserData {
 }
 
 // Memoized NavUser component for better performance
-export const NavUser = memo(function NavUser({ user }: { user: UserData }) {
+export const NavUser = memo(function NavUser() {
 	const { isMobile } = useSidebar();
 	const router = useRouter();
 	const { search_space_id } = useParams();
 
+	// User state management
+	const [user, setUser] = useState<User | null>(null);
+	const [isLoadingUser, setIsLoadingUser] = useState(true);
+	const [userError, setUserError] = useState<string | null>(null);
+
+	// Fetch user details
+	useEffect(() => {
+		const fetchUser = async () => {
+			try {
+				if (typeof window === "undefined") return;
+
+				try {
+					const userData = await apiClient.get<User>("users/me");
+					setUser(userData);
+					setUserError(null);
+				} catch (error) {
+					console.error("Error fetching user:", error);
+					setUserError(error instanceof Error ? error.message : "Unknown error occurred");
+				} finally {
+					setIsLoadingUser(false);
+				}
+			} catch (error) {
+				console.error("Error in fetchUser:", error);
+				setIsLoadingUser(false);
+			}
+		};
+
+		fetchUser();
+	}, []);
+
+	// Create user object for display
+	const userData: UserData = {
+		name: user?.email ? user.email.split("@")[0] : "User",
+		email:
+			user?.email ||
+			(isLoadingUser ? "Loading..." : userError ? "Error loading user" : "Unknown User"),
+		avatar: "/icon-128.png", // Default avatar
+	};
+
 	// Memoized logout handler
 	const handleLogout = useCallback(() => {
 		if (typeof window !== "undefined") {
@@ -42,9 +90,9 @@ export const NavUser = memo(function NavUser({ user }: { user: UserData }) {
 	}, [router]);
 
 	// Get user initials for avatar fallback
-	const userInitials = user.name
+	const userInitials = userData.name
 		.split(" ")
-		.map((n) => n[0])
+		.map((n: string) => n[0])
 		.join("")
 		.toUpperCase()
 		.slice(0, 2);
@@ -61,14 +109,14 @@ export const NavUser = memo(function NavUser({ user }: { user: UserData }) {
 								aria-label="User menu"
 							>
 								<Avatar className="h-8 w-8 rounded-lg">
-									<AvatarImage src={user.avatar} alt={user.name} />
+									<AvatarImage src={userData.avatar} alt={userData.name} />
 									<AvatarFallback className="rounded-lg">
-										{userInitials || <User className="h-4 w-4" />}
+										{userInitials || <UserIcon className="h-4 w-4" />}
 									</AvatarFallback>
 								</Avatar>
 								<div className="grid flex-1 text-left text-sm leading-tight">
-									<span className="truncate font-medium">{user.name}</span>
+									<span className="truncate font-medium">{userData.name}</span>
-									<span className="truncate text-xs text-muted-foreground">{user.email}</span>
+									<span className="truncate text-xs text-muted-foreground">{userData.email}</span>
 								</div>
 								<ChevronsUpDown className="ml-auto size-4" />
 							</SidebarMenuButton>
@@ -82,14 +130,14 @@ export const NavUser = memo(function NavUser({ user }: { user: UserData }) {
 							<DropdownMenuLabel className="p-0 font-normal">
 								<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
 									<Avatar className="h-8 w-8 rounded-lg">
-										<AvatarImage src={user.avatar} alt={user.name} />
+										<AvatarImage src={userData.avatar} alt={userData.name} />
 										<AvatarFallback className="rounded-lg">
-											{userInitials || <User className="h-4 w-4" />}
+											{userInitials || <UserIcon className="h-4 w-4" />}
 										</AvatarFallback>
 									</Avatar>
 									<div className="grid flex-1 text-left text-sm leading-tight">
-										<span className="truncate font-medium">{user.name}</span>
+										<span className="truncate font-medium">{userData.name}</span>
-										<span className="truncate text-xs text-muted-foreground">{user.email}</span>
+										<span className="truncate text-xs text-muted-foreground">{userData.email}</span>
 									</div>
 								</div>
 							</DropdownMenuLabel>