apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(icon-rail): integrate user profile component and enhance layout with user settings options

Browse source
This commit is contained in:
Anish Sarkar 2026-04-28 19:29:14 +05:30
parent 282510f93c
commit e60c5399af
4 changed files with 62 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

32
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

@ -113,19 +113,23 @@ function UserAvatar({
avatarUrl,
initials,
bgColor,
size = "sm",
}: {
avatarUrl?: string;
initials: string;
bgColor: string;
size?: "sm" | "md";
}) {
const sizeClass = size === "md" ? "h-9 w-9" : "h-8 w-8";
if (avatarUrl) {
return (
<Image
src={avatarUrl}
alt="User avatar"
width={32}
height={32}
className="h-8 w-8 shrink-0 rounded-lg object-cover select-none"
width={size === "md" ? 36 : 32}
height={size === "md" ? 36 : 32}
className={cn(sizeClass, "shrink-0 rounded-full object-cover select-none")}
referrerPolicy="no-referrer"
unoptimized
/>
@ -134,7 +138,10 @@ function UserAvatar({
return (
<div
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white select-none"
className={cn(
sizeClass,
"flex shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white select-none"
)}
style={{ backgroundColor: bgColor }}
>
{initials}
@ -181,24 +188,29 @@ export function SidebarUserProfile({
// Collapsed view - just show avatar with dropdown
if (isCollapsed) {
return (
<div className="border-t p-2">
<div className="border-t px-1.5 py-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button
type="button"
className={cn(
"flex h-10 w-full items-center justify-center rounded-md",
"hover:bg-accent transition-colors",
"mx-auto flex h-9 w-9 items-center justify-center rounded-full",
"transition-opacity hover:opacity-90",
"focus:outline-none focus-visible:outline-none",
"data-[state=open]:bg-transparent"
"data-[state=open]:opacity-90"
)}
>
<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
<UserAvatar
avatarUrl={user.avatarUrl}
initials={initials}
bgColor={bgColor}
size="md"
/>
<span className="sr-only">{displayName}</span>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48" side="right" align="center" sideOffset={8}>
<DropdownMenuContent className="w-48" side="right" align="end" sideOffset={8}>
<DropdownMenuLabel className="font-normal">
<div className="flex items-center gap-2">
<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />