From 4e447cade4ce3b7d91ee7937161eaab3111a9733 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Tue, 10 Mar 2026 15:05:36 +0100
Subject: [PATCH] feat: enhance UserAvatar component to accept FacehashProps
 and add WhatsApp link in UsersTable context menu

---
 .../src/components/facehash/facehash.tsx      |  2 +-
 .../src/components/tables/users-table.tsx     | 22 +++++++++++++-
 .../src/components/user_avatar.tsx            | 29 ++++++++++++-------
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/apps/infoalloggi/src/components/facehash/facehash.tsx b/apps/infoalloggi/src/components/facehash/facehash.tsx
index 1241aa2..baaba81 100644
--- a/apps/infoalloggi/src/components/facehash/facehash.tsx
+++ b/apps/infoalloggi/src/components/facehash/facehash.tsx
@@ -7,7 +7,7 @@ import { FACES } from "./faces";
 type Intensity3D = "none" | "subtle" | "medium" | "dramatic";
 type Variant = "gradient" | "solid";
 
-interface FacehashProps
+export interface FacehashProps
 	extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
 	/**
 	 * String to generate a deterministic face from.
diff --git a/apps/infoalloggi/src/components/tables/users-table.tsx b/apps/infoalloggi/src/components/tables/users-table.tsx
index d08a7c4..53676ed 100644
--- a/apps/infoalloggi/src/components/tables/users-table.tsx
+++ b/apps/infoalloggi/src/components/tables/users-table.tsx
@@ -22,9 +22,11 @@ import { UserAvatar } from "~/components/user_avatar";
 import { cn } from "~/lib/utils";
 import type { Users } from "~/schemas/public/Users";
 import { api } from "~/utils/api";
+import { WhatsAppIcon2 } from "../svgs";
 import {
 	ContextMenuContent,
 	ContextMenuItem,
+	ContextMenuLabel,
 	ContextMenuSeparator,
 } from "../ui/context-menu";
 
@@ -209,6 +211,15 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 				columns_titles={columns_titles}
 				contextMenuContent={(data) => (
 					<ContextMenuContent>
+						<ContextMenuLabel className="flex h-8 items-center gap-2">
+							<UserAvatar
+								className="size-5"
+								style={{ height: "1.25rem", width: "1.25rem" }}
+								userId={data.id}
+								username={data.username}
+							/>
+							<span className="font-semibold text-sm">{data.username}</span>
+						</ContextMenuLabel>
 						<ContextMenuItem>
 							<Link
 								aria-label="Visualizza Ricerca"
@@ -275,6 +286,16 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 								<MessagesSquare /> Chat
 							</Link>
 						</ContextMenuItem>
+						<ContextMenuItem>
+							<Link
+								className="flex w-full items-center gap-2"
+								href={`https://wa.me/${data.telefono}`}
+								target="_blank"
+							>
+								<WhatsAppIcon2 className="size-4 fill-muted-foreground stroke-0" />
+								WhatsApp
+							</Link>
+						</ContextMenuItem>
 						<ContextMenuSeparator />
 						<ContextMenuItem>
 							<button
@@ -290,7 +311,6 @@ export const UsersTable = (props: { data: UserWChatInfo[] }) => {
 				)}
 				data={tabledata}
 				defaultColumnVisibility={{
-					actions: true,
 					created_at: true,
 					email: true,
 					telefono: true,
diff --git a/apps/infoalloggi/src/components/user_avatar.tsx b/apps/infoalloggi/src/components/user_avatar.tsx
index efae398..03be703 100644
--- a/apps/infoalloggi/src/components/user_avatar.tsx
+++ b/apps/infoalloggi/src/components/user_avatar.tsx
@@ -1,6 +1,6 @@
 import { cn, getHexColorFromString, getInitials } from "~/lib/utils";
 import type { UsersId } from "~/schemas/public/Users";
-import { Facehash } from "./facehash/facehash";
+import { Facehash, type FacehashProps } from "./facehash/facehash";
 
 const colorOptions = new Map<string, string>();
 
@@ -39,19 +39,26 @@ export const UserAvatarOld = ({
 	);
 };
 */
-export const UserAvatar = ({
-	userId,
-	username,
-	className,
-}: {
-	userId: UsersId;
-	username?: string;
-	className?: string;
-}) => {
+export const UserAvatar = (
+	props: {
+		userId: UsersId;
+		username?: string;
+	} & Omit<
+		FacehashProps,
+		| "name"
+		| "colors"
+		| "initialsCount"
+		| "intensity3d"
+		| "variant"
+		| "showInitial"
+	>,
+) => {
+	const { userId, username, ...rest } = props;
 	const value = `${username && getInitials(username)}${userId}`;
 	return (
 		<Facehash
-			className={cn("size-20 rounded-full", className)}
+			{...rest}
+			className={cn("size-20 rounded-full", rest.className)}
 			colors={[
 				"#2D3436",
 				"#535C68",