Allow toggling private note in user card with avatar click

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%;

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

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}>