From 00a95bba6aa40271b56db6e6756d28e59b240fa1 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 6 Aug 2026 15:23:02 +0300
Subject: [PATCH] Allow toggling private note in user card with avatar click

---
 app/components/NoteAvatar.module.css           |  7 +++++++
 app/components/NoteAvatar.tsx                  | 18 ++++++++++++++++--
 app/features/user-card/components/UserCard.tsx |  5 ++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/app/components/NoteAvatar.module.css b/app/components/NoteAvatar.module.css
index 666758db9..ee71b19cb 100644
--- a/app/components/NoteAvatar.module.css
+++ b/app/components/NoteAvatar.module.css
@@ -5,6 +5,13 @@
 	width: fit-content;
 }
 
+.clickable {
+	cursor: pointer;
+	border: none;
+	padding: 0;
+	background: none;
+}
+
 .badge {
 	position: absolute;
 	bottom: 15%;
diff --git a/app/components/NoteAvatar.tsx b/app/components/NoteAvatar.tsx
index 01a099cbf..f63c3f3af 100644
--- a/app/components/NoteAvatar.tsx
+++ b/app/components/NoteAvatar.tsx
@@ -29,20 +29,34 @@ const SIZE_CLASS = {
  * `sentiment` is set: POSITIVE → green check, NEGATIVE → red cross, NEUTRAL → grey dash. Renders the
  * children without a badge when `sentiment` is `null`/`undefined`. `size` scales the badge to match
  * the wrapped avatar (`xs` for tiny avatars, `sm` for small avatars, `md` for large ones).
+ *
+ * `onClick` makes the whole wrapper (avatar and badge) clickable. It is kept out of the tab order, so
+ * only use it as a shortcut to an action that is also available elsewhere.
  */
 export function NoteAvatar({
 	sentiment,
 	size = "md",
 	className,
+	onClick,
 	children,
 }: {
 	sentiment?: Sentiment | null;
 	size?: keyof typeof SIZE_CLASS;
 	className?: string;
+	onClick?: () => void;
 	children: React.ReactNode;
 }) {
+	const Wrapper = onClick ? "button" : "div";
+
 	return (
-		<div className={clsx(styles.wrapper, className)}>
+		<Wrapper
+			type={onClick ? "button" : undefined}
+			className={clsx(styles.wrapper, className, {
+				[styles.clickable]: onClick,
+			})}
+			onClick={onClick}
+			tabIndex={onClick ? -1 : undefined}
+		>
 			{children}
 			{sentiment ? (
 				<span
@@ -56,6 +70,6 @@ export function NoteAvatar({
 					{BADGE_ICON[sentiment]}
 				</span>
 			) : null}
-		</div>
+		</Wrapper>
 	);
 }
diff --git a/app/features/user-card/components/UserCard.tsx b/app/features/user-card/components/UserCard.tsx
index 5adde66a7..8aca95eab 100644
--- a/app/features/user-card/components/UserCard.tsx
+++ b/app/features/user-card/components/UserCard.tsx
@@ -316,7 +316,10 @@ function CardContent({
 				)}
 			</div>
 			<div className={styles.identity}>
-				<NoteAvatar sentiment={data.privateNote?.sentiment}>
+				<NoteAvatar
+					sentiment={data.privateNote?.sentiment}
+					onClick={isOwnCard ? undefined : onNoteButtonPress}
+				>
 					<Avatar user={data} size="md" className={styles.avatar} />
 				</NoteAvatar>
 				<div className={styles.nameGroup}>