vrr/SurfSense
2
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2025-09-02 10:39:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

sticky top navigation & user data in user nav

Browse source
This commit is contained in:
Utkarsh-Patel-13 2025-08-02 21:36:04 -07:00
parent 8bc369cd94
commit a7c1fd49be
3 changed files with 64 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,8 +26,8 @@ export function DashboardClientLayout({
navMain={navMain}
/>
<SidebarInset>
<header className="flex h-16 shrink-0 items-center gap-2">
<div className="flex items-center gap-2 px-4">
<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 justify-between w-full gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="h-6" />
<ThemeTogglerComponent />

3
surfsense_web/components/sidebar/app-sidebar.tsx
View file

@ -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>
);

74
surfsense_web/components/sidebar/nav-user.tsx
View file

@ -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 text-xs text-muted-foreground">{user.email}</span>
<span className="truncate font-medium">{userData.name}</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 text-xs text-muted-foreground">{user.email}</span>
<span className="truncate font-medium">{userData.name}</span>
<span className="truncate text-xs text-muted-foreground">{userData.email}</span>
</div>
</div>
</DropdownMenuLabel>