feat: replace image rendering with Avatar component in team content and sidebar user profile

- Updated team content to utilize Avatar for member display, enhancing visual consistency.
- Modified SidebarUserProfile to include select-none class for improved styling.

surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx

@@ -20,7 +20,7 @@ import {
 	UserPlus,
 	Users,
 } from "lucide-react";
-import Image from "next/image";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -100,27 +100,6 @@ import { trackSearchSpaceInviteSent, trackSearchSpaceUsersViewed } from "@/lib/p
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
 
-const AVATAR_COLORS = [
-	"bg-amber-600",
-	"bg-blue-600",
-	"bg-emerald-600",
-	"bg-violet-600",
-	"bg-rose-600",
-	"bg-cyan-600",
-	"bg-orange-600",
-	"bg-teal-600",
-	"bg-pink-600",
-	"bg-indigo-600",
-];
-
-function getAvatarColor(identifier: string): string {
-	let hash = 0;
-	for (let i = 0; i < identifier.length; i++) {
-		hash = identifier.charCodeAt(i) + ((hash << 5) - hash);
-	}
-	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
-}
-
 function getAvatarInitials(member: Membership): string {
 	if (member.user_display_name) {
 		const parts = member.user_display_name.trim().split(/\s+/);
@@ -461,7 +440,6 @@ function MemberRow({
 }) {
 	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 	const initials = getAvatarInitials(member);
-	const avatarColor = getAvatarColor(member.user_id);
 	const displayName = member.user_display_name || member.user_email || "Unknown";
 	const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
 	const showActions = !member.is_owner && (canManageRoles || canRemove);
@@ -470,26 +448,12 @@ function MemberRow({
 		<TableRow className="border-b border-border/40 transition-colors hover:bg-muted/30">
 			<TableCell className="w-[45%] py-2.5 px-4 md:px-6 max-w-0 border-r border-border/40">
 				<div className="flex items-center gap-3">
-					<div className="shrink-0">
-						{member.user_avatar_url ? (
-							<Image
-								src={member.user_avatar_url}
-								alt={displayName}
-								width={40}
-								height={40}
-								className="h-10 w-10 rounded-full object-cover"
-							/>
-						) : (
-							<div
-								className={cn(
-									"h-10 w-10 rounded-full flex items-center justify-center text-white font-medium text-sm",
-									avatarColor
-								)}
-							>
-								{initials}
-							</div>
+					<Avatar className="size-10 shrink-0">
+						{member.user_avatar_url && (
+							<AvatarImage src={member.user_avatar_url} alt={displayName} />
 						)}
-					</div>
+						<AvatarFallback className="text-sm">{initials}</AvatarFallback>
+					</Avatar>
 					<div className="min-w-0">
 						<p className="font-medium text-sm truncate select-text">{displayName}</p>
 						{member.user_display_name && member.user_email && (

surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx

@@ -122,7 +122,7 @@ function UserAvatar({
 				alt="User avatar"
 				width={32}
 				height={32}
-				className="h-8 w-8 shrink-0 rounded-lg object-cover"
+				className="h-8 w-8 shrink-0 rounded-lg object-cover select-none"
 				referrerPolicy="no-referrer"
 				unoptimized
 			/>